这篇文章主要介绍了深入浅析AngularJS和DataModel 的相关资料,需要的朋友可以参考下
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
什么是 AngularJS？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素”背后”添加代码。
AngularJS 支持输入验证。
通常，在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> <span></span> </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> <div></div> <span></span? is available: <span></span> <button>Delete</button> <button>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> <div></div> <span></span> is abailble: <span></span> <button>Delete</button> <button>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.c<strong style="color:transparent">来源gaodaima#com搞(代@码网</strong>ontroller('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; }) }])
您可能感兴趣的文章:
- angularjs学习笔记之双向数据绑定
- 实例剖析AngularJS框架中数据的双向绑定运用
- 深入学习AngularJS中数据的双向绑定机制
- 详解JavaScript的AngularJS框架中的作用域与数据绑定
- angularjs自定义ng-model标签的属性
- AngularJs 弹出模态框（model）
- angularjs在ng-repeat中使用ng-model遇到的问题
- AngularJS实现Model缓存的方式
- AngularJS基础 ng-model-options 指令简单示例
- AngularJS实践之使用NgModelController进行数据绑定
以上就是深入浅析AngularJS和DataModel的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：深入浅析AngularJS和DataModel
转载请注明原文链接：深入浅析AngularJS和DataModel
