Overview

1. 什么是數(shù)據(jù)綁定（Data Binding）？

參考自官方文檔

數(shù)據(jù)綁定是指在Model和View之間進行的數(shù)據(jù)自動同步。當Model發(fā)生變化，View就會反應(yīng)這個變化，反之亦然。

1. 傳統(tǒng)的數(shù)據(jù)綁定方式 ——One Way Data Binding

簡單講，Model上的任何變化，都不能自動反映到View中。另一個方向也是一樣的，View中的變化也不能夠自動反映到Model中來。因此需要開發(fā)者自己設(shè)計代碼來實現(xiàn)這種View與Model的數(shù)據(jù)同步。

2. Angula的數(shù)據(jù)綁定方式——Two Way Data Binding

簡單講，就是能夠讓View的變化能夠自動及時地反映到Model上，反之亦然。相當于，View是Model的一個及時的展現(xiàn)(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 關(guān)于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會產(chǎn)生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 關(guān)于對controller的測試，參考官方文檔。

3. 什么是Service？

參考自官方文檔

3.1 作用

用來組織可復(fù)用代碼

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