Lovely Filter

Simplify The Presentation Part In Your App

Created by Howard.Zuo / @右领军大都督

Introduction On Wikipedia

Too much to learn!!

Where is the promised Angular Filter?


What is AngularJS

  • Open-source web application framework maintained by Google
  • Design for Single-Page Applications
  • Client-side Model–View–Controller
  • Extend HTML vocabulary like what WebComponent preferred to do

How Popular AngularJS Really Is


How AngularJS Bootstrapped

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'. At this point Angular looks for the ng-app directive which designates your application root. If the ng-app directive is found then Angular will:
  • load the module associated with the directive.
  • create the application injector
  • compile the DOM treating the ng-app directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.

About Angular Filter

  • Set UI stuff Free from Logic
  • Formats the value of an expression for display to the user
  • Can be used in view templates, controllers or services
  • Easy to customization

Why Filter Is Important?

UI Stuff Mixed In Logic Is Bad

$.get('ajax/users.json', function(users) {
    var newUsers =, function(user){
        return {
            title: item.title.toUpperCase(),
            birthday: formatDate(item.birthday, 'yyyy-MM-dd'),
            salary: user.salary + ' RMB'
    var compiled = _.template(tpl);
        users: newUsers

    var compiled = _.template(tpl);
        users: displayUsers

M-(VC) ≠ MVC

Filter In Action

Used In Template

Format Filter - touppercase

Used In Template

Collection Filter - range

Used In Controller

angular.module('demo', [])
.controller('DmController', ['$scope', '$filter',
    function($scope, $filter){

        $scope.formattedDate = $filter('date')(new Date(), 'yyyy-MM-dd');// 2015-10-12


Used In Service

angular.module('demo', [])
.service('DmService', ['$filter',

        this.getEuroMoney = function(amount){
            return $filter('currency')(amount, '€');// €26.2


What Else Can Filter Do?

How About Write Your Own i18n?

The End

Welcome to Angular world!