filter

定义过滤器，返回一个filter function，在指令模板下可以进行一些筛选操作。

1
2
3
4
5
6
7
8
9
10
angular.module('filterModule')
    .filter('fileSize', function () {
      return function (value) {
        var bytes = parseInt(value, 10);
        var byteLabel = bytes > 1 ? 'Bytes' : 'Byte';
        var sizes = [byteLabel, 'KB', 'MB', 'GB', 'TB'];
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
      };
    });

factory service

factory service 都可以提供 xhr 服务，功用类似。
区别在于factory是返回一个实例对象， 而service是将服务绑定在this上的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
angular.module('httpModule')
    .factory('api', function($http, $q){
        var api = {};
        api.func1 = function(){}
        api.func2 = function(){}

        return api;
    })

angular.module('httpModule')
    .service('api', function($http, $q){
        var self = this;
        self.func1 = function(){}
        self.func2 = function(){}
    })

directive

指令一般用于html和dom的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
angular.module('tabDirectives', [])
  .directive('showTab',
    function () {
      return {
      //  restrict: 'ACE',
      //  template: '',  
      //  templateUrl: '',
        link: function (scope, element) {
          element.click(function(e) {
            e.preventDefault();
            $(element).tab('show');
          });
        }
      };
    }
  );

指令中scope

  • scope=false， 默认指令共享父的scope，两者改变数据，双向更改。
  • scope=true，指令初始化时继承父scope的数据，指令中scope改变之前，仍然将继承父scope的数据，但当指令中数据改变后，scope将是孤岛scope，与父scope地址分离。

  • scope={}，自定义scope，初始化一个scope对象，与父scope分离，提供了3种属性初始化方式。

    • @ ：单项prop设置，将父scope传递到指令中
    • = ：与父scope双向绑定
    • & ：指向父scope中的function

ngRoute

$routeProvider提供ngRoute服务，.when进行url匹配，指定模板url和controller，otherwise是前面没匹配到最后执行的， 类似switch的default，resolve是在切换前进行执行，data用于参数传递。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
angular.module('app', ['ngRoute'])
    .config(function($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);  //开启html5模式
    //路由匹配
    $routeProvider
    .when('/page1', {  
        templateUrl: 'page1.tpl.html',  
        controller: 'page1Controller'  
    })  
    .when('/page/:id, {
        templateUrl: 'page.tpl.html',  
        controller: 'pageController' 
    })
    .otherwise({
      templateUrl: 'app.tpl.html',
      controller: 'appController',
      resolve: {
        myVar: function(authService) {
          return authService.init();
        }
      },
      data: {
        authorizedRoles: ['admin', 'creator', 'manager', 'guest']
      }
    });
    }
    .run( function ($rootScope, $window, $location, $log) {  
        // 监听路由更改事件
        $rootScope.$on('$routeChangeStart', function (event, current, previous) {
        if(current.$$route && current.$$route.data) {
            var authorizedRoles = current.$$route.data.authorizedRoles;
            $rootScope.notAuthorized = !authService.isAuthorized(authorizedRoles);
        }
      );  
    
        $rootScope.$on('$routeChangeSuccess', function() { }); 
    })

$digest $apply $scope $rootScope

$rootScope是所有$scope的上级，相当于全局的$scope
$digest更新自身scope和子scope， $apply从$rootScope更新

event

$emit 向上
$broadcast 向下
$scope.on() 接收

优化

  • 减少 $watch
  • ng-if 会卸载dom和$watch， 比ng-show效果好点
  • 减少不必要的$digest $apply
  • ng-repeat track by