AngularJS若干概念

Overview

1. 什么是数据绑定（Data Binding）？

参考自官方文档

数据绑定是指在Model和View之间进行的数据自动同步。当Model发生变化，View就会反应这个变化，反之亦然。

1. 传统的数据绑定方式 ——One Way Data Binding

简单讲，Model上的任何变化，都不能自动反映到View中。另一个方向也是一样的，View中的变化也不能够自动反映到Model中来。因此需要开发者自己设计代码来实现这种View与Model的数据同步。

2. Angula的数据绑定方式——Two Way Data Binding

简单讲，就是能够让View的变化能够自动及时地反映到Model上，反之亦然。相当于，View是Model的一个及时的展现(projection)。

这样做的好处在于，使得Controller与View完全独立开来，因此对Controller的测试不需要考虑到View（即DOM）。

<!-- 用两个尖括号来绑定View中的message与Model中的message -->
<div ng-app> 
  <h1>Binding</h1> 
  <input type="text" ng-model="message"> 
  <p>{{ message }}</p>
</div>

2 . 什么是Controller？

参考自官方文档

2.1 作用

1. 用于开辟一个$scope对象，并对它进行state的初始化(即初始化一些variable)。
2. 再对这个scope定义一些behaviors(即定义一些function)。
3. 使这些states以及behaviors能够在View中使用。

一句话就是 "expose data to our view via $scope"。

var myApp = angular.module('spicyApp2', []);

// 对myApp定义一个controller名叫'SpicyController'
// 通过DI的当时引入$scope
myApp.controller('SpicyController', ['$scope', function($scope) {
    // initial state
    $scope.customSpice = 'wasabi';
    $scope.spice = 'very';
    
    // behaviors
    $scope.spicy = function(spice) {
        $scope.spice = spice;
    };
}]);

2.2 关于nested controller

在js中：

var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);

在html中：

  <div ng-controller="MainController">
    <p>Good {{timeOfDay}}, {{name}}!</p>  <!-- morning, Nikki! -->

    <div ng-controller="ChildController">
      <p>Good {{timeOfDay}}, {{name}}!</p> <!-- morning, Mattie! -->

      <div ng-controller="GrandChildController"> 
        <p>Good {{timeOfDay}}, {{name}}!</p> <!-- evening, Gingerbread Baby! -->
      </div>
    </div>
  </div>

这样的nested controller会产生scope的继承：类似与java，如果没有override的话，子类继承父类，如果override的话，以override的为标准。

2.3 Controller As

在上述方式中，可能存在的问题是：如果子类override了父类的data，那么子类就不能够再去access父类的data，因此，如果有个对父类scope的referrence就好了。因此，“The rule of thumb is to always have a dot when referencing variables from controllers”

html中：利用as语法，在之后的data引用中都加点

<div ng-controller="MainCtrl as main"> 
  <p>{{ main.message }}</p>
  <form ng-submit="main.changeMessage(main.newMessage)">
    <input type="text" ng-model="main.newMessage">
    <button type="submit">Change Message</button>
  </form>
</div>

js中：去掉$scope，利用this

angular.module('app').controller('MainCtrl', function (){

  this.message = 'hello';

  this.changeMessage = function(message){
    this.message = message;
  };
});

2.4 关于对controller的测试，参考官方文档。

3. 什么是Service？

参考自官方文档

3.1 作用

用来组织可复用代码

var myModule = angular.module('myModule', []);
// 通过module的factory来注册service
myModule.factory('serviceId', function() {
  var shinyNewServiceInstance;
  // factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});