AngularJS Tutorial (2)

4. Filter

{{ filter_expression | filter : expression : comparator : anyPropertyKey}}

$filter('filter')(array, expression, comparator, anyPropertyKey)

expression 用于过滤的字符串/function(value,index,array)/Object ({x:"xx"} or {$:"xx"})

comparator 用于比较 function(actual,expected)

5. Two-way Data Binding

ng-model

6.XHR & Dependency Injection

angular使用service去封装服务代码，同时service可以被依赖注入到相应的模块

function PhoneListController($http) {...}

angular会依据参数名称将注册对象注入到controller，考虑到JS压缩等因素，angular提供了显示声明的方法：

.component('phoneList', {..., controller: ['$http', function PhoneListController($http) {...}]});

注册对象会依据list声明顺序注入到对应参数

$http是內建用于处理ajax请求的service

build service:

angular.module('xx',[]).factory('service',['$http',function($http){

    return serviceInstance;

}])

7.angular-route

ng-view include the view template four the current route into the layout template

angular.module('phonecatApp', [
  'ngRoute',
  ...
]);

配置路由 $routeProvider , 配置路由前缀$localtionProvider.hashPrefix

angular.
  module('phonecatApp').
  config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider) {
      $locationProvider.hashPrefix('!');

      $routeProvider.
        when('/phones', {
          template: '<phone-list></phone-list>'
        }).
        when('/phones/:phoneId', {
          template: '<phone-detail></phone-detail>'
        }).
        otherwise('/phones');
    }
  ]);

使用路由参数

angular.
  module('phoneDetail').
  component('phoneDetail', {
    template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
    controller: ['$routeParams',
      function PhoneDetailController($routeParams) {
        this.phoneId = $routeParams.phoneId;
      }
    ]
  });

8.Custom Filters

angular.
  module('core').
  filter('checkmark', function() {
    return function(input) {
      return input ? '\u2713' : '\u2718';
    };
  });

<dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>

9. Event Handler & ng-src

<img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />

10. Resource and Custom Service

angular-resource

angular.
  module('core.phone').
  factory('Phone', ['$resource',
    function($resource) {
      return $resource('phones/:phoneId.json', {}, {
        query: {
          method: 'GET',
          params: {phoneId: 'phones'},
          isArray: true
        }
      });
    }
  ]);

this.phones = Phone.query();

self.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
          self.setImage(phone.images[0]);
        });