我們知道，AngularJS并沒(méi)有自帶立等可用的數(shù)據(jù)建模方案。而是以相當(dāng)抽象的方式，讓我們?cè)赾ontroller中使用JSON數(shù)據(jù)作為模型。但是隨著時(shí)間的推移和項(xiàng)目的成長(zhǎng)，我意識(shí)到這種建模的方式不再能滿(mǎn)足我們項(xiàng)目的需求。在這篇文章中我會(huì)介紹在我的AngularJS應(yīng)用中處理數(shù)據(jù)建模的方式。
為Controller定義模型
讓我們從一個(gè)簡(jiǎn)單的例子開(kāi)始。我想要顯示一個(gè)書(shū)本(book)的頁(yè)面。下面是控制器(Controller)：
BookController
app.controller('BookController', ['$scope', function($scope) {
$scope.book = {
id: 1,
name: 'Harry Potter',
author: 'J. K. Rowling',
stores: [
{ id: 1, name: 'Barnes & Noble', quantity: 3},
{ id: 2, name: 'Waterstones', quantity: 2},
{ id: 3, name: 'Book Depository', quantity: 5}
]
};
}]);
這個(gè)控制器創(chuàng)建了一個(gè)書(shū)本的模型，我們可以在后面的模板中(templage)中使用它。
template for displaying a book
<div ng-controller="BookController">
Id: <span ng-bind="book.id"></span>
Name:<input type="text" ng-model="book.name" />
Author: <input type="text" ng-model="book.author" />
</div>
假如我們需要從后臺(tái)的api獲取書(shū)本的數(shù)據(jù)，我們需要使用$http:
BookController with $http
app.controller('BookController', ['$scope', '$http', function($scope, $http) {
var bookId = 1;
$http.get('ourserver/books/' + bookId).success(function(bookData) {
$scope.book = bookData;
});
}]);
注意到這里的bookData仍然是一個(gè)JSON對(duì)象。接下來(lái)我們想要使用這些數(shù)據(jù)做一些事情。比如，更新書(shū)本信息，刪除書(shū)本，甚至其他的一些不涉及到后臺(tái)的操作，比如根據(jù)請(qǐng)求的圖片大小生成一個(gè)書(shū)本圖片的url，或者判斷書(shū)本是否有效。這些方法都可以被定義在控制器中。
BookController with several book actions
app.controller('BookController', ['$scope', '$http', function($scope, $http) {
var bookId = 1;
$http.get('ourserver/books/' + bookId).success(function(bookData) {
$scope.book = bookData;
});
$scope.deleteBook = function() {
$http.delete('ourserver/books/' + bookId);
};
$scope.updateBook = function() {
$http.put('ourserver/books/' + bookId, $scope.book);
};
$scope.getBookImageUrl = function(width, height) {
return 'our/image/service/' + bookId + '/width/height';
};
$scope.isAvailable = function() {
if (!$scope.book.stores || $scope.book.stores.length === 0) {
return false;
}
return $scope.book.stores.some(function(store) {
return store.quantity > 0;
});
};
}]);
然后在我們的模板中：
template for displaying a complete book
<div ng-controller="BookController">
<div ng-style="{ backgroundImage: 'url(' + getBookImageUrl(100, 100) + ')' }"></div>
Id: <span ng-bind="book.id"></span>
Name:<input type="text" ng-model="book.name" />
Author: <input type="text" ng-model="book.author" />
Is Available: <span ng-bind="isAvailable() ? 'Yes' : 'No' "></span>
<button ng-click="deleteBook()">Delete</button>
<button ng-click="updateBook()">Update</button>
</div>
在controllers之間共享Model
如果書(shū)本的結(jié)構(gòu)和方法只和一個(gè)控制器有關(guān)，那我們現(xiàn)在的工作已經(jīng)可以應(yīng)付。但是隨著應(yīng)用的增長(zhǎng)，會(huì)有其他的控制器也需要和書(shū)本打交道。那些控制器很多時(shí)候也需要獲取書(shū)本，更新它，刪除它，或者獲得它的圖片url以及看它是否有效。因此，我們需要在控制器之間共享這些書(shū)本的行為。我們需要使用一個(gè)返回書(shū)本行為的factory來(lái)實(shí)現(xiàn)這個(gè)目的。在動(dòng)手寫(xiě)一個(gè)factory之前，我想在這里先提一下，我們創(chuàng)建一個(gè)factory來(lái)返回帶有這些book輔助方法的對(duì)象，但我更傾向于使用prototype來(lái)構(gòu)造一個(gè)Book類(lèi)，我覺(jué)得這是更正確的選擇：
Book model service
app.factory('Book', ['$http', function($http) {
function Book(bookData) {
if (bookData) {
this.setData(bookData):
}
// Some other initializations related to book
};
Book.prototype = {
setData: function(bookData) {
angular.extend(this, bookData);
},
load: function(id) {
var scope = this;
$http.get('ourserver/books/' + bookId).success(function(bookData) {
scope.setData(bookData);
});
},
delete: function() {
$http.delete('ourserver/books/' + bookId);
},
update: function() {
$http.put('ourserver/books/' + bookId, this);
},
getImageUrl: function(width, height) {
return 'our/image/service/' + this.book.id + '/width/height';
},
isAvailable: function() {
if (!this.book.stores || this.book.stores.length === 0) {
return false;
}
return this.book.stores.some(function(store) {
return store.quantity > 0;
});
}
};
return Book;
}]);
這種方式下，書(shū)本相關(guān)的所有行為都被封裝在Book服務(wù)內(nèi)?，F(xiàn)在，我們?cè)贐ookController中來(lái)使用這個(gè)亮眼的Book服務(wù)。
BookController that uses Book model
app.controller('BookController', ['$scope', 'Book', function($scope, Book) {
$scope.book = new Book();
$scope.book.load(1);
}]);
正如你看到的，控制器變得非常簡(jiǎn)單。它創(chuàng)建一個(gè)Book實(shí)例，指派給scope，并從后臺(tái)加載。當(dāng)書(shū)本被加載成功時(shí)，它的屬性會(huì)被改變，模板也隨著被更新。記住其他的控制器想要使用書(shū)本功能，只要簡(jiǎn)單地注入Book服務(wù)即可。此外，我們還要改變template使用book的方法。
template that uses book instance
<div ng-controller="BookController">
<div ng-style="{ backgroundImage: 'url(' + book.getImageUrl(100, 100) + ')' }"></div>
Id: <span ng-bind="book.id"></span>
Name:<input type="text" ng-model="book.name" />
Author: <input type="text" ng-model="book.author" />
Is Available: <span ng-bind="book.isAvailable() ? 'Yes' : 'No' "></span>
<button ng-click="book.delete()">Delete</button>
<button ng-click="book.update()">Update</button>
</div>
到這里，我們知道了如何建模一個(gè)數(shù)據(jù)，把他的方法封裝到一個(gè)類(lèi)中，并且在多個(gè)控制器中共享它，而不需要寫(xiě)重復(fù)代碼。
在多個(gè)控制器中使用相同的書(shū)本模型
我們定義了一個(gè)書(shū)本模型，并且在多個(gè)控制器中使用了它。在使用了這種建模架構(gòu)之后你會(huì)注意到有一個(gè)嚴(yán)重的問(wèn)題。到目前為止，我們假設(shè)多個(gè)控制器對(duì)書(shū)本進(jìn)行操作，但如果有兩個(gè)控制器同時(shí)處理同一本書(shū)會(huì)是什么情況呢？
假設(shè)我們頁(yè)面的一塊區(qū)域我們所有書(shū)本的名稱(chēng)，另一塊區(qū)域可以更新某一本書(shū)。對(duì)應(yīng)這兩塊區(qū)域，我們有兩個(gè)不同的控制器。第一個(gè)加載書(shū)本列表，第二個(gè)加載特定的一本書(shū)。我們的用戶(hù)在第二塊區(qū)域中修改了書(shū)本的名稱(chēng)并且點(diǎn)擊“更新”按鈕。更新操作成功后，書(shū)本的名稱(chēng)會(huì)被改變。但是在書(shū)本列表中，這個(gè)用戶(hù)始終看到的是修改之前的名稱(chēng)！真實(shí)的情況是我們對(duì)同一本書(shū)創(chuàng)建了兩個(gè)不同的書(shū)本實(shí)例——一個(gè)在書(shū)本列表中使用，而另一個(gè)在修改書(shū)本時(shí)使用。當(dāng)用戶(hù)修改書(shū)本名稱(chēng)的時(shí)候，它實(shí)際上只修改了后一個(gè)實(shí)例中的屬性。然而書(shū)本列表中的書(shū)本實(shí)例并未得到改變。
解決這個(gè)問(wèn)題的辦法是在所有的控制器中使用相同的書(shū)本實(shí)例。在這種方式下，書(shū)本列表和書(shū)本修改的頁(yè)面和控制器都持有相同的書(shū)本實(shí)例，一旦這個(gè)實(shí)例發(fā)生變化，就會(huì)被立刻反映到所有的視圖中。那么按這種方式行動(dòng)起來(lái)，我們需要?jiǎng)?chuàng)建一個(gè)booksManager服務(wù)（我們沒(méi)有大寫(xiě)開(kāi)頭的b字母，是因?yàn)檫@是一個(gè)對(duì)象而不是一個(gè)類(lèi)）來(lái)管理所有的書(shū)本實(shí)例池，并且富足返回這些書(shū)本實(shí)例。如果被請(qǐng)求的書(shū)本實(shí)例不在實(shí)例池中，這個(gè)服務(wù)會(huì)創(chuàng)建它。如果已經(jīng)在池中，那么就直接返回它。請(qǐng)牢記，所有的加載書(shū)本的方法最終都會(huì)被定義在booksManager服務(wù)中，因?yàn)樗俏ㄒ坏奶峁?shū)本實(shí)例的組件。
booksManager service
app.factory('booksManager', ['$http', '$q', 'Book', function($http, $q, Book) {
var booksManager = {
_pool: {},
_retrieveInstance: function(bookId, bookData) {
var instance = this._pool[bookId];
if (instance) {
instance.setData(bookData);
} else {
instance = new Book(bookData);
this._pool[bookId] = instance;
}
return instance;
},
_search: function(bookId) {
return this._pool[bookId];
},
_load: function(bookId, deferred) {
var scope = this;
$http.get('ourserver/books/' + bookId)
.success(function(bookData) {
var book = scope._retrieveInstance(bookData.id, bookData);
deferred.resolve(book);
})
.error(function() {
deferred.reject();
});
},
/* Public Methods */
/* Use this function in order to get a book instance by it's id */
getBook: function(bookId) {
var deferred = $q.defer();
var book = this._search(bookId);
if (book) {
deferred.resolve(book);
} else {
this._load(bookId, deferred);
}
return deferred.promise;
},
/* Use this function in order to get instances of all the books */
loadAllBooks: function() {
var deferred = $q.defer();
var scope = this;
$http.get('ourserver/books)
.success(function(booksArray) {
var books = [];
booksArray.forEach(function(bookData) {
var book = scope._retrieveInstance(bookData.id, bookData);
books.push(book);
});
deferred.resolve(books);
})
.error(function() {
deferred.reject();
});
return deferred.promise;
},
/* This function is useful when we got somehow the book data and we wish to store it or update the pool and get a book instance in return */
setBook: function(bookData) {
var scope = this;
var book = this._search(bookData.id);
if (book) {
book.setData(bookData);
} else {
book = scope._retrieveInstance(bookData);
}
return book;
},
};
return booksManager;
}]);
下面是我們的EditableBookController和BooksListController兩個(gè)控制器的代碼：
EditableBookController and BooksListController that uses booksManager
app.factory('Book', ['$http', function($http) {
function Book(bookData) {
if (bookData) {
this.setData(bookData):
}
// Some other initializations related to book
};
Book.prototype = {
setData: function(bookData) {
angular.extend(this, bookData);
},
delete: function() {
$http.delete('ourserver/books/' + bookId);
},
update: function() {
$http.put('ourserver/books/' + bookId, this);
},
getImageUrl: function(width, height) {
return 'our/image/service/' + this.book.id + '/width/height';
},
isAvailable: function() {
if (!this.book.stores || this.book.stores.length === 0) {
return false;
}
return this.book.stores.some(function(store) {
return store.quantity > 0;
});
}
};
return Book;
}]);
需要注意的是，模塊（template）中還是保持原來(lái)使用book實(shí)例的方式?，F(xiàn)在應(yīng)用中只持有一個(gè)id為1的book實(shí)例，它發(fā)生的所有改變都會(huì)被反映到使用它的各個(gè)頁(yè)面上。
AngularJS 中的一些坑
UI的閃爍
Angular的自動(dòng)數(shù)據(jù)綁定功能是亮點(diǎn)，然而，他的另一面是：在Angular初始化之前，頁(yè)面中可能會(huì)給用戶(hù)呈現(xiàn)出沒(méi)有解析的表達(dá)式。當(dāng)DOM準(zhǔn)備就緒，Angular計(jì)算并替換相應(yīng)的值。這樣就會(huì)導(dǎo)致出現(xiàn)一個(gè)丑陋的閃爍效果。
上述情形就是在Angular教程中渲染示例代碼的樣子：
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{ phone.name }}
<p>{{ phone.snippet }}</p>
</li>
</ul>
</body>
如果你做的是SPA(Single Page Application)，這個(gè)問(wèn)題只會(huì)在第一次加載頁(yè)面的時(shí)候出現(xiàn)，幸運(yùn)的是，可以很容易杜絕這種情形發(fā)生: 放棄{{ }}表達(dá)式，改用ng-bind指令
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
<span ng-bind="phone.name"></span>
<p ng-bind="phone.snippet">Optional: visually pleasing placeholder</p>
</li>
</ul>
</body>
你需要一個(gè)tag來(lái)包含這個(gè)指令，所以我添加了一個(gè)<span>給phone name.
那么初始化的時(shí)候會(huì)發(fā)生什么呢，這個(gè)tag里的值會(huì)顯示(但是你可以選擇設(shè)置空值).然后，當(dāng)Angular初始化并用表達(dá)式結(jié)果替換tag內(nèi)部值，注意你不需要在ng-bind內(nèi)部添加大括號(hào)。更簡(jiǎn)潔了！如果你需要符合表達(dá)式，那就用ng-bind-template吧，
如果用這個(gè)指令，為了區(qū)分字符串字面量和表達(dá)式，你需要使用大括號(hào)
另外一種方法就是完全隱藏元素，甚至可以隱藏整個(gè)應(yīng)用，直到Angular就緒。
Angular為此還提供了ng-cloak指令，工作原理就是在初始化階段inject了css規(guī)則，或者你可以包含這個(gè)css 隱藏規(guī)則到你自己的stylesheet。Angular就緒后就會(huì)移除這個(gè)cloak樣式，讓我們的應(yīng)用(或者元素)立刻渲染。
Angular并不依賴(lài)jQuery。事實(shí)上，Angular源碼里包含了一個(gè)內(nèi)嵌的輕量級(jí)的jquery:jqLite. 當(dāng)Angular檢測(cè)到你的頁(yè)面里有jQuery出現(xiàn)，他就會(huì)用這個(gè)jQuery而不再用jqLite，直接證據(jù)就是Angular里的元素抽象層。比如，在directive中訪(fǎng)問(wèn)你要應(yīng)用到的元素。
angular.module('jqdependency', [])
.directive('failswithoutjquery', function() {
return {
restrict : 'A',
link : function(scope, element, attrs) {
element.hide(4000)
}
}
});
但是這個(gè)元素jqLite還是jQuery元素呢？取決于，手冊(cè)上這么寫(xiě)的：
Angular中所有的元素引用都會(huì)被jQuery或者jqLite包裝；他們永遠(yuǎn)不是純DOM引用
所以Angular如果沒(méi)有檢測(cè)到j(luò)Query，那么就會(huì)使用jqLite元素，hide()方法值能用于jQuery元素，所以說(shuō)這個(gè)示例代碼只能當(dāng)檢測(cè)到j(luò)Query時(shí)才可以使用。如果你(不小心)修改了AngularJS和jQuery的出現(xiàn)順序，這個(gè)代碼就會(huì)失效！雖說(shuō)沒(méi)事挪腳本的順序的事情不經(jīng)常發(fā)生，但是在我開(kāi)始模塊化代碼的時(shí)候確實(shí)給我造成了困擾。尤其是當(dāng)你開(kāi)始使用模塊加載器(比如 RequireJS), 我的解決辦法是在配置里顯示的聲明Angular確實(shí)依賴(lài)jQuery
另外一種方法就是你不要通過(guò)Angular元素的包裝來(lái)調(diào)用jQuery特定的方法，而是使用$(element).hide(4000)來(lái)表明自己的意圖。這樣依賴(lài)，即使修改了script加載順序也沒(méi)事。
壓縮
特別需要注意的是Angular應(yīng)用壓縮問(wèn)題。否則錯(cuò)誤信息比如 ‘Unknown provider:aProvider <- a' 會(huì)讓你摸不到頭腦。跟其他很多東西一樣，這個(gè)錯(cuò)誤在官方文檔里也是無(wú)從查起的。簡(jiǎn)而言之，Angular依賴(lài)參數(shù)名來(lái)進(jìn)行依賴(lài)注入。壓縮器壓根意識(shí)不到這個(gè)這跟Angular里普通的參數(shù)名有啥不同，盡可能的把腳本變短是他們職責(zé)。咋辦？用“友好壓縮法”來(lái)進(jìn)行方法注入?？催@里：
module.service('myservice', function($http, $q) {
// This breaks when minified
});
to this:
module.service('myservice', [ '$http', '$q', function($http, $q) {
// Using the array syntax to declare dependencies works with minification<b>!</b>
}]);
這個(gè)數(shù)組語(yǔ)法很好的解決了這個(gè)問(wèn)題。我的建議是從現(xiàn)在開(kāi)始照這個(gè)方法寫(xiě)，如果你決定壓縮JavaScript，這個(gè)方法可以讓你少走很多彎路。好像是一個(gè)automatic rewriter機(jī)制，我也不太清楚這里面是怎么工作的。
最終一點(diǎn)建議：如果你想用數(shù)組語(yǔ)法復(fù)寫(xiě)你的functions，在所有Angular依賴(lài)注入的地方應(yīng)用之。包括directives，還有directive里的controllers。別忘了逗號(hào)(經(jīng)驗(yàn)之談)
// the directive itself needs array injection syntax:
module.directive('directive-with-controller', ['myservice', function(myservice) {
return {
controller: ['$timeout', function($timeout) {
// but this controller needs array injection syntax, too!
}],
link : function(scope, element, attrs, ctrl) {
}
}
}]);
注意：link function不需要數(shù)組語(yǔ)法，因?yàn)樗](méi)有真正的注入。這是被Angular直接調(diào)用的函數(shù)。Directive級(jí)別的依賴(lài)注入在link function里也是使用的。
Directive永遠(yuǎn)不會(huì)‘完成'
在directive中，一個(gè)令人掉頭發(fā)的事就是directive已經(jīng)‘完成'但你永遠(yuǎn)不會(huì)知道。當(dāng)把jQuery插件整合到directive里時(shí)，這個(gè)通知尤為重要。假設(shè)你想用ng-repeat把動(dòng)態(tài)數(shù)據(jù)以jQuery datatable的形式顯示出來(lái)。當(dāng)所有的數(shù)據(jù)在頁(yè)面中加載完成后，你只需要調(diào)用$(‘.mytable).dataTable()就可以了。 但是，臣妾做不到?。?BR> 為啥呢？Angular的數(shù)據(jù)綁定是通過(guò)持續(xù)的digest循環(huán)實(shí)現(xiàn)的?；诖?，Angular框架里根本沒(méi)有一個(gè)時(shí)間是‘休息'的。 一個(gè)解決方法就是將jQuery dataTable的調(diào)用放在當(dāng)前digest循環(huán)外，用timeout方法就可以做到。
angular.module('table',[]).directive('mytable', ['$timeout', function($timeout) {
return {
restrict : 'E',
template: '<table>' +
'<thead><tr><th>counting</th></tr></thead>' +
'<tr ng-repeat="data in datas"><td></td></tr>' +
'</table>',
link : function(scope, element, attrs, ctrl) {
scope.datas = ["one", "two", "three"]
// Doesn't work, shows an empty table:
// $('.mytable', element).dataTable()
// But this does:
$timeout(function() {
$('.mytable', element).dataTable();
}, 0)
}
}
}]);