AngularJS的一些使用方法和技巧(1)
Posted on 2015-02-01 19:19 云自無心水自閑 閱讀(5033) 評論(1) 編輯 收藏 所屬分類: 心得體會 、AngularJS1. AngularJS的module函數有兩種用法,
a. 定義一個module, 需要傳入2個參數,module('moduleName', []), 第一個參數是新的module名稱,第二個參數是新module所依賴的module數組。
b. 載入一個module, 只需要1個參數,module('moduleName'), 唯一的一個參數指定要載入的module名稱。
2. 使用controller函數來定義一個控制器(controller), 用ng-controller將控制器綁定到具體的HTML組件上。定義控制器的controller函數也需要2個參數,第一個是控制器名稱,第二個參數同樣也是一個數組,數組的最后一個元素就是controller本身的函數,前面的元素用字符串的形式指定其需要的依賴項。如果沒有依賴項,那就只需要定義函數。比如:
angular.module('app1', [])
.controller('mainControl', [function() {
console.log('controller created.');
}]);
3. 在controller函數中用var定義的局部變量,在HTML中是不可見的。
4. 推薦在controller函數中盡量避免直接引用this, 比較好的做法是使用代理。原因是一個函數中的this關鍵詞在被外部調用的時候,是會被覆蓋掉的。這樣的話,在函數內部和外部的this會是完全不同兩個對象。
代理用法示例:
angular.module('app1', [])
.controller('mainControl', [function() {
var self = this;
self.message = 'Hello world';
self.changeMessage = function() {
self.message = 'Goodbye.';
};
}]);
5. ng-bind與雙大括號的區別, ng-bind和{{}}可以說基本上是可以互相替換的,但是也有區別。區別在于:AngularJS在啟動的時候就會執行ng-bind, 而{{}}的替換時間會稍晚一些。有可能發現頁面在加載的時候,雙括號被一閃而過地替換掉(只在頁面初次加載的時候發生)。但是ng-bind就沒有這個問題。
6. ng-cloak可以用于解決雙括號閃現的問題。
6. ng-cloak可以用于解決雙括號閃現的問題。