Lovely Filter – Simplify The Presentation Part In Your App – UI Stuff Mixed In Logic Is Bad

View Github Repository Open presentation in a new window

leftstick

See all presentation from leftstick

Lovely Filter – Simplify The Presentation Part In Your App – UI Stuff Mixed In Logic Is Bad

0 0

lovely-filter

It is the first topic on technical-strength which introduce how filter works

On Github leftstick / lovely-filter

Lovely Filter

Simplify The Presentation Part In Your App

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

Introduction On Wikipedia

Too much to learn!!

Mechanism

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 = _.map(users, function(user){
        return {
            title: item.title.toUpperCase(),
            name: item.name,
            birthday: formatDate(item.birthday, 'yyyy-MM-dd'),
            salary： user.salary + ' RMB'
        };
    });
    var compiled = _.template(tpl);
    $('#content').append(compiled({
        users: newUsers
    }));
});
Service.getDisplayUsers()
.success(function(displayUsers){
    var compiled = _.template(tpl);
    $('#content').append(compiled({
        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',
    function($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!

Lovely Filter Simplify The Presentation Part In Your App Created by Howard.Zuo / @右领军大都督