AngularJs中控制器的定義，實例化，作用域范圍

基于AngularJS入門與進階(江榮波 著)這本書的筆記

AngularJS 1.x的demo

AngularJS1.x和Angular2,4,5是不一樣的兩個東西，構建方式，語法，都很多不同

---

AngularJs控制器定義與實例化

寫一個簡單的計算demo，通過解讀代碼來理解控制器的實例化

Title 單價： 數量： 總價：{{tcr.totalPrice()}}

AngularJS框架在window對象中增加了一個全局的angular對象，調用angular對象的module()方法返回一個模塊實例，調用模塊實例的controller()方法來聲明一個控制器。

ng-controller指令

AngularJS框架遇到ng-controller指令時會根據ng-controller指令指定的控制器名稱查找控制器構造方法，然后使用對應的構造方法實例化控制器對象，并將控制器依賴的對象注入控制器對象中

上面的代碼片段就是一個完整的實例化控制器的過程：

當AngularJS框架遇到ng-controller指令時會查找名為testController的構造方法實例化構造器對象

控制器對象實例化時創建一個新的作用域對象，名稱為scope對象注入控制器對象中

ng-model指令在作用域對象scope對象訪問表單數據了，雙向數據綁定，數據根據輸入及時變化

控制器作用域范圍

ng-controller指令實例化控制器時會產生一個新的作用域對象，一個頁面中可能會有多個ng_controller,每個控制器對應的作用域對象只能與ng-controller指令所在標簽的開始標簽與結束標簽之間的DOM元素建立數據綁定。

Title 單價： 數量： 總價：{{tcr.totalPrice()}} 單價： 數量： 總價：{{tcr.totalPrice()}}

運行可以發現，兩個作用域中變量名相同，但是結果互不干擾

控制器中處理DOM事件

AngularJS框架為我們提供了一系列的事件綁定指令，這些指令是在原生的JavaScript事件名稱前增加“ng-”前綴，例如ng-click、ng-keyup等，具體可以查看API手冊。

Hello Word

總結

以上是生活随笔為你收集整理的springboot中接口实例化_AngularJs中控制器的定义，实例化，作用域范围的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。