?

通常，在AngularJS中使用JSON作為存儲數據的模型。我們可能這樣在controller中寫model：

?

app.controller('BookController',['$scope',function($scope){$scope.book = {id:1,name:'',author:'',stores:[{id:1, name:'', quantity:2},{id:2, name:'', quantity:2},...]};
}])

?

在視圖中也許這樣用到這個model:

?

<div ng-controller="BookController"><span ng-bind="book.id"></span><input type="text" ng-model="book.name"/><input type="text" ng-model="book.author"/>
</div>

?

當我們需要從服務端獲取數據的時候，可能這樣寫：

?

app.controller('BookController',['$scope', '$http', function($scope, $http){var bookId = 1;$http.get('api/books'+bookId).success(function(bookData){$scope.book = bookData;})$scope.deleteBook = function(){$http.delete('api/books/' + bookId);}$scope.updateBook = function(){$http.put('api/books/'+bookId, $scope.book);}$scope.getBookImageUrl = function(width, height){return 'our/iamge/service' +bookId + '/width/height';}$scope.isAvailable = function(){if(!$scope.book.stores || $scope.book.stores.length === 0){return false;}reutrn $scope.book.stores.some(function(store){return store.quantity > 0;})}
}])

?

在視圖中可能這樣使用：

?

<div ng-controller="BookController"><div ng-style="{backgroundImage: 'url('+getBookImageUrl(100,100)+')'}"></div><span ng-bind="book.id"></span?<input type="text" ng-model="book.name"/><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>

?

以上，JSON格式的model只能在BookController中使用，如何在其他controller中也可以使用呢？

--通過factory方式

?

app.factory('Book', ['$http', function($http){function Book(bookData){if(bookData){this.setData(bookData);}}Book.prototype = {setData: function(bookData){angular.extend(this, bookData);},load: function(id){var scope = this;$http.get('api/books/' + bookId).success(function(bookData){scope.setData(bookData);})},delete: function(bookId){$http.delete('api/books/' + bookId);},update: function(bookId){$http.put('api/books/' + bookId, this);},getImageUrl: function(width, height){return 'our/image/service/' + this.book.id + '/' + width + '/' + height;},isAvailable: funciton(){if(!this.book.stores || this.book.stores.length === 0) {return false;}      return this.book.stores.some(function(store){return store.quantity > 0;})}}return Book;
}])

?

以上，通過factory的方式創建了類似Book的一個Data Model，現在可以注入到controller中去了。

?

app.controller('BookController', ['$scope', 'Book', function($scope, Book){$scope.book = new Book();$scope.book.load(1);
}])

?

在視圖中也會有相應的變化。

?

<div ng-controller="BookController"><div ng-style="{backgroundImage: 'url(' + book.getImageUrl(100, 100) + ')'}"></div><span ng-bind="book.id"></span><input type="text" ng-model="book.name"/><input type="text" ng-model="book.author"/>is abailble: <span ng-bind="book.isAvailabe() ? 'Yes' : 'No'"></span><button ng-click="book.delete()">Delete</button><button ng-click="book.update()">Update</button>
</div>

?

以上，多個controller可以使用同一個有關book的Data Model了，如果多個controller處理同一個有關book的Data Model呢？

?

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;},_seach: function(bookId){reutrn this_.pool[bookId];},_load: function(bookId, deferred){var scope = this;$http.get('api/books/' + bookId).success(funciton(bookData){var book = scope._retrieveInstance(bookData.id, bookData);deferred.resolve(book);}).error(function(){deferred.reject();})},getBook: function(bookId){var deferred = $q.defer();var book = this._search(bookId);if(book){deferred.resove(book);} else {this._load(bookId, deferred);}return deferred.promise;},loadAllBooks: function(){var deferred = $q.defer();var scope = this;$http.get('api/books').success(function(booksArray){var books = [];booksArray.forEach(function(bookData){var book = scope.l_retrieveInstance(bookData.id, bookData);books.push(book);});deferred.resolve(books);}).error(function(){deferred.reject();});return deferred.promise;}，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;
}])

?

Book服務去掉load方法。

?

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;
}]);

?

現在，多個controller可以使用同一個booksManager服務。

?

app.controller('EditableBookController',['$scope', 'booksManager', function($scope, booksManager){booksManager.getBook(1).then(function(book){$scope.book = book;})}]).controller('BooksListController',['$scope', 'booksManager', function($scope, booksManager){booksManager.loadAllBooks().then(function(books){$scope.books = books;})}])

?

參考：http://www.webdeveasy.com/angularjs-data-model/

?

轉載于:https://www.cnblogs.com/darrenji/p/5192839.html

總結

以上是生活随笔為你收集整理的AngularJS和DataModel的全部內容，希望文章能夠幫你解決所遇到的問題。

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