ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
2.、AngularJS 事件廣播與接收
發送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);
接收消息： $scope.on(name,function(event,data){ });
區別： $emit 廣播給父controller $broadcast 廣播給子controller
broadcast 是從發送者向他的子scope廣播一個事件。
這裏就是ParentController發送， ParentController 和 ChildController 會接受到, 而MainController是不會收到的
$emit 廣播給父controller，父controller 是可以收到消息
$on 有兩個參數function(event,msg) 第一個參數是事件對象，第二個參數是接收到消息信息
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
angular.module('onBroadcastEvent',
['ng']) .controller('MainController', function($scope)
{ $scope.$on('To-MainController', function(event,msg)
{ console.log('MainController
received:' +
msg); }); }) .controller('ParentController', function($scope)
{ $scope.click
= function (msg)
{ $scope.$emit('To-MainController',msg
+ ',from
ParentController to MainController'); $scope.$broadcast('To-ChildController',
msg + ',from
ParentController to ChildController'); $scope.$broadcast('To-BrotherController',
msg + ',from
ParentController to BrotherController'); } }) .controller('ChildController', function($scope){ $scope.$on('To-ChildController', function(event,msg)
{ console.log('ChildController
received:' +
msg); }); }) .controller('BrotherController', function($scope){ $scope.$on('To-BrotherController', function(event,
msg) { console.log('BrotherController
received:' +
msg); }); }); |
3 特性五：指令（Directives）
指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情？那麼AngularJS可以做到。
指令可以用來創建自定義的標籤。它們可以用來裝飾元素或者操作DOM屬性。可以作爲標籤、屬性、註釋和類名使用。
這裏是一個例子，它監聽一個事件並且針對的更新它的$scope ，如下：
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
然後，你可以使用這個自定義的directive來使用：
<my-component ng-model="message"></my-component>
使用一系列的組件來創建你自己的應用將會讓你更方便的添加，刪除和更新功能。
4 數據綁定
AngularJS的雙向數據綁定，意味着你可以在Mode(JS)中改變數據，而這些變動立刻就會自動出現在View上，反之亦然。即：一方面可以做到model變化驅動了DOM中元素變化，另一方面也可以做到DOM元素的變化也會影響到Model。
在我們使用jQuery的時候，代碼中會大量充斥類似這樣的語句：var val = $(‘#id’).val(); $(‘#id’).html(str);等等，即頻繁的DOM操作（讀取和寫入），其實我們的最終目的並不是要操作DOM，而是要實現業務邏輯。ng的綁定將讓你擺脫DOM操作，只要模板與數據通過聲明進行了綁定，兩者將隨時保持同步，最新的數據會實時顯示在頁面中，頁面中用戶修改的數據也會實時被記錄在數據模型中。
從View到Controller再到View的數據交互（例01）：
4.2.2 module (待進一步理解)
首先需要明確一下模板的概念。在我還不知道有模板這個東西的時候，曾經用js拼接出很長的HTML字符串，然後append到頁面中，這種方式想想真是又土又笨。後來又看到可以把HTML代碼包裹在一個<script>標籤中當作模板，然後按需要取來使用。
在ng中，模板十分簡單，它就是我們頁面上的HTML代碼，不需要附加任何額外的東西。在模板中可以使用各種指令來增強它的功能，這些指令可以讓你把模板和數據巧妙的綁定起來。
在<html>標籤上多了一個屬性ng-app=”MyApp”，它的作用就是用來指定ng的作用域是在<html>標籤以內部分。在js中，我們調用angular對象的module方法來聲明一個模塊，模塊的名字和ng-app的值對應。這樣聲明一下就可以讓ng運行起來了。
示例：
<html ng-app="demoApp">
var demoApp = angular.module('demoApp', []);
4.2.3 ng-controller （$scope 作用域的理解）
要明確創建一個$scope 對象，我們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性：
<div ng-controller="MyController"> {{ person.name }} </div>
ng-controller指令給所在的DOM元素創建了一個新的$scope 對象，並將這個$scope 對象包含進外層DOM元素的$scope 對象裏。在上面的例子裏，這個外層DOM元素的$scope 對象，就是$rootScope 對象。這個scope鏈是這樣的：
所有scope都遵循原型繼承（prototypal inheritance），這意味着它們都能訪問父scope們。對任何屬性和方法，如果AngularJS在當前scope上找不到，就會到父 scope上去找，如果在父scope上也沒找到，就會繼續向上回溯，一直到$rootScope 上。即如果controller是多層嵌套的，就會從最裏面一直往外找，這個scope鏈是這樣的：
唯一的例外：有些指令屬性可以選擇性地創建一個獨立的scope，讓這個scope不繼承它的父scope們，這個會在指令詳解中說明。
4.6.4特殊的ng-src和ng-href（{{}}顯示代碼的問題）
在說明這兩個指令的特殊之前，需要先了解一下ng的啓動及執行過程，如下圖：
1) 瀏覽器加載靜態HTML文件並解析爲DOM；
2) 瀏覽器加載angular.js文件；
3) angular監聽DOMContentLoaded 事件，監聽到時開始啓動；
4) angular尋找ng-app指令，確定作用範圍；
5) 找到app中定義的Module使用$injector服務進行依賴注入；
6) 根據$injector服務創建$compile服務用於編譯；
7) $compile服務編譯DOM中的指令、過濾器等；
8) 使用ng-init指令，將作用域中的變量進行替換；
9) 最後生成了我們在最終視圖。
可以看到，ng框架是在DOMcontent加載完畢後纔開始發揮作用。假如我們模板中有一張圖片如下：
<img src="http://m.cnblogs.com/142260/”{{imgUrl}}” />
那麼在頁面開始加載到ng編譯完成之前，頁面上會一直顯示一張錯誤的圖片，因爲路徑{{imgUrl}}還未被替換。
爲了避免這種情況，我們使用ng-src指令，這樣在路徑被正確得到之前就不會顯示找不到圖片。同理，<a>標籤的href屬性也需要換成ng-href，這樣頁面上就不會先出現一個地址錯誤的鏈接。
順着這個思路再多想一點，我們在模板中使用{{}}顯示數據時，在ng編譯完成之前頁面上豈不是會顯示出大括號及裏面的表達式？確實是這樣。爲了避免這個，ng中有一個與{{}}等同的指令:ng-bind，同樣用於單向綁定，在頁面剛加載的時候就不會顯示出對用戶無用的數據了。儘管這樣你可能不但沒舒心反而更糾結了，{{}}那麼好用易理解，還不能用了不成？好消息是我們依然可以使用。因爲我編寫的是單頁面應用，頁面只會在加載index.html的時
候出這個問題，只需在index.html中的模板中換成ng-bind就行。其他的模板是我們動態加載的，就可以放心使用{{}}了。
