Overview
1. 什么是数据绑定（Data Binding）？
参考自官方文档
数据绑定是指在Model和View之间进行的数据自动同步。当Model发生变化，View就会反应这个变化，反之亦然。
- 传统的数据绑定方式 ——One Way Data Binding
简单讲，Model上的任何变化，都不能自动反映到View中。另一个方向也是一样的，View中的变化也不能够自动反映到Model中来。因此需要开发者自己设计代码来实现这种View与Model的数据同步。
- 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 作用
- 用于开辟一个$scope对象，并对它进行state的初始化(即初始化一些variable)。
- 再对这个scope定义一些behaviors(即定义一些function)。
- 使这些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;
});
