AngularJS (前端MVC架構)

angularjs是一款優秀的前端js架構，已經被用于google的多款産品當中。angularjs的核心特點是：mvvm、子產品化、自動化雙向資料綁定、語義化标簽、依賴注入。

适用于：建構crud web應用。（cduq，資料的增删改查）。

不适用于：遊戲，圖形界面編輯器。這種dom操作很頻繁也很複雜的應用，和crud應用就有很大的不同，它們不适合用angularjs來建構。像這種情況用一些更輕量、簡單的技術如jquery可能會更好。

m，model，資料模型

v，view，視圖，負責向使用者展示的部分

c，controller，業務邏輯和控制邏輯

angularjs 通過 ng-directives 擴充了 html。

ng-app 指令定義一個 angularjs 應用程式。

ng-model 指令把元素值（比如輸入域的值）綁定到應用程式。

ng-bind 指令把應用程式資料綁定到 html 視圖。

{{表達式}}   等同于ng-bind

ng-controller 指令定義了應用程式控制器。

控制器是 javascript 對象，由标準的 javascript 對象的構造函數 建立。

控制器的 $scope 是控制器所指向的應用程式

html 元素。

子產品定義了您的應用程式。所有的控制器都應該屬于一個子產品。子產品保持全局命名空間中的整潔。

在本執行個體中，"myapp.js" 包含了一個應用程式子產品定義，"myctrl.js" 包含了一個控制器：

注意：

angular.module(naappname,[dependentmodule1,...,dependentmodulen]) //一個ng-app對應着一個module，這個是定義。注意不能重複定義！

angular.module(naappname）//定義完ngapp的子產品之後，可通過此函數獲得naappname對應的子產品，用來綁定多個控制器。

例：

共享變量：

通過service，即angular.module().service(name,fun)。這麼做有一個問題，$watch()不能捕獲service中變量的改動，有這種需求的話就隻能靠通信了。

通信：ng的控制器是有繼承關系的。控制器向父級發$emit()事件，向子級發$broadcast()事件，事件接收方實作$on()即可完成通信。例子轉自 http://blog.51yip.com/jsjquery/1602.html。

html

js

點選click me的輸出結果為 ：