我们知道,AngularJS并没有自带立等可用的数据建模方案。而是以相当抽象的方式,让我们在controller中使用JSON数据作为模型。但是随着时间的推移和项目的成长,我意识到这种建模的方式不再能满足我们项目的需求。在这篇文章中我会介绍在我的AngularJS应用中处理数据建模的方式。
为Controller定义模型
让我们从一个简单的例子开始。我想要显示一个书本(book)的页面。下面是控制器(Controller):
BookController
1 2 3 4 5 6 7 8 9 10 11 12 | 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}
]
};
}]);
|
登录后复制
这个控制器创建了一个书本的模型,我们可以在后面的模板中(templage)中使用它。
template for displaying a book
1 2 3 4 5 6 7 | <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>
|
登录后复制
假如我们需要从后台的api获取书本的数据,我们需要使用$http:
BookController with $http
1 2 3 4 5 6 7 | app.controller( 'BookController' , [ '$scope' , '$http' , function ( $scope , $http ) {
var bookId = 1;
$http .get( 'ourserver/books/' + bookId).success( function (bookData) {
$scope .book = bookData;
});
}]);
|
登录后复制
注意到这里的bookData仍然是一个JSON对象。接下来我们想要使用这些数据做一些事情。比如,更新书本信息,删除书本,甚至其他的一些不涉及到后台的操作,比如根据请求的图片大小生成一个书本图片的url,或者判断书本是否有效。这些方法都可以被定义在控制器中。
BookController with several book actions
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
如果书本的结构和方法只和一个控制器有关,那我们现在的工作已经可以应付。但是随着应用的增长,会有其他的控制器也需要和书本打交道。那些控制器很多时候也需要获取书本,更新它,删除它,或者获得它的图片url以及看它是否有效。因此,我们需要在控制器之间共享这些书本的行为。我们需要使用一个返回书本行为的factory来实现这个目的。在动手写一个factory之前,我想在这里先提一下,我们创建一个factory来返回带有这些book辅助方法的对象,但我更倾向于使用prototype来构造一个Book类,我觉得这是更正确的选择:
Book model service
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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( '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;
}]);
|
登录后复制
这种方式下,书本相关的所有行为都被封装在Book服务内。现在,我们在BookController中来使用这个亮眼的Book服务。
BookController that uses Book model
1 2 3 4 | app.controller( 'BookController' , [ '$scope' , 'Book' , function ( $scope , Book) {
$scope .book = new Book();
$scope .book.load(1);
}]);
|
登录后复制
正如你看到的,控制器变得非常简单。它创建一个Book实例,指派给scope,并从后台加载。当书本被加载成功时,它的属性会被改变,模板也随着被更新。记住其他的控制器想要使用书本功能,只要简单地注入Book服务即可。此外,我们还要改变template使用book的方法。
template that uses book instance
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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>
|
登录后复制
到这里,我们知道了如何建模一个数据,把他的方法封装到一个类中,并且在多个控制器中共享它,而不需要写重复代码。
在多个控制器中使用相同的书本模型
我们定义了一个书本模型,并且在多个控制器中使用了它。在使用了这种建模架构之后你会注意到有一个严重的问题。到目前为止,我们假设多个控制器对书本进行操作,但如果有两个控制器同时处理同一本书会是什么情况呢?
假设我们页面的一块区域我们所有书本的名称,另一块区域可以更新某一本书。对应这两块区域,我们有两个不同的控制器。第一个加载书本列表,第二个加载特定的一本书。我们的用户在第二块区域中修改了书本的名称并且点击“更新”按钮。更新操作成功后,书本的名称会被改变。但是在书本列表中,这个用户始终看到的是修改之前的名称!真实的情况是我们对同一本书创建了两个不同的书本实例——一个在书本列表中使用,而另一个在修改书本时使用。当用户修改书本名称的时候,它实际上只修改了后一个实例中的属性。然而书本列表中的书本实例并未得到改变。
解决这个问题的办法是在所有的控制器中使用相同的书本实例。在这种方式下,书本列表和书本修改的页面和控制器都持有相同的书本实例,一旦这个实例发生变化,就会被立刻反映到所有的视图中。那么按这种方式行动起来,我们需要创建一个booksManager服务(我们没有大写开头的b字母,是因为这是一个对象而不是一个类)来管理所有的书本实例池,并且富足返回这些书本实例。如果被请求的书本实例不在实例池中,这个服务会创建它。如果已经在池中,那么就直接返回它。请牢记,所有的加载书本的方法最终都会被定义在booksManager服务中,因为它是唯一的提供书本实例的组件。
booksManager service
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 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();
});
},
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;
},
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;
},
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两个控制器的代码:
EditableBookController and BooksListController that uses booksManager
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | app.factory( 'Book' , [ '$http' , function ( $http ) {
function Book(bookData) {
if (bookData) {
this.setData(bookData):
}
};
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)中还是保持原来使用book实例的方式。现在应用中只持有一个id为1的book实例,它发生的所有改变都会被反映到使用它的各个页面上。
AngularJS 中的一些坑
UI的闪烁
Angular的自动数据绑定功能是亮点,然而,他的另一面是:在Angular初始化之前,页面中可能会给用户呈现出没有解析的表达式。当DOM准备就绪,Angular计算并替换相应的值。这样就会导致出现一个丑陋的闪烁效果。
上述情形就是在Angular教程中渲染示例代码的样子:
1 2 3 4 5 6 7 8 | <body ng-controller= "PhoneListCtrl" >
<ul>
<li ng-repeat= "phone in phones" >
{{ phone.name }}
<p>{{ phone.snippet }}</p>
</li>
</ul>
</body>
|
登录后复制
如果你做的是SPA(Single Page Application),这个问题只会在第一次加载页面的时候出现,幸运的是,可以很容易杜绝这种情形发生: 放弃{{ }}表达式,改用ng-bind指令
1 2 3 4 5 6 7 8 9 | <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>
|
登录后复制
你需要一个tag来包含这个指令,所以我添加了一个给phone name.
那么初始化的时候会发生什么呢,这个tag里的值会显示(但是你可以选择设置空值).然后,当Angular初始化并用表达式结果替换tag内部值,注意你不需要在ng-bind内部添加大括号。更简洁了!如果你需要符合表达式,那就用ng-bind-template吧,
如果用这个指令,为了区分字符串字面量和表达式,你需要使用大括号
另外一种方法就是完全隐藏元素,甚至可以隐藏整个应用,直到Angular就绪。
Angular为此还提供了ng-cloak指令,工作原理就是在初始化阶段inject了css规则,或者你可以包含这个css 隐藏规则到你自己的stylesheet。Angular就绪后就会移除这个cloak样式,让我们的应用(或者元素)立刻渲染。
Angular并不依赖jQuery。事实上,Angular源码里包含了一个内嵌的轻量级的jquery:jqLite. 当Angular检测到你的页面里有jQuery出现,他就会用这个jQuery而不再用jqLite,直接证据就是Angular里的元素抽象层。比如,在directive中访问你要应用到的元素。
1 2 3 4 5 6 7 8 9 | angular.module( 'jqdependency' , [])
.directive( 'failswithoutjquery' , function () {
return {
restrict : 'A' ,
link : function (scope, element, attrs) {
element.hide(4000)
}
}
});
|
登录后复制
但是这个元素jqLite还是jQuery元素呢?取决于,手册上这么写的:
Angular中所有的元素引用都会被jQuery或者jqLite包装;他们永远不是纯DOM引用
所以Angular如果没有检测到jQuery,那么就会使用jqLite元素,hide()方法值能用于jQuery元素,所以说这个示例代码只能当检测到jQuery时才可以使用。如果你(不小心)修改了AngularJS和jQuery的出现顺序,这个代码就会失效!虽说没事挪脚本的顺序的事情不经常发生,但是在我开始模块化代码的时候确实给我造成了困扰。尤其是当你开始使用模块加载器(比如 RequireJS), 我的解决办法是在配置里显示的声明Angular确实依赖jQuery
另外一种方法就是你不要通过Angular元素的包装来调用jQuery特定的方法,而是使用$(element).hide(4000)来表明自己的意图。这样依赖,即使修改了script加载顺序也没事。
压缩
特别需要注意的是Angular应用压缩问题。否则错误信息比如 ‘Unknown provider:aProvider <- a' 会让你摸不到头脑。跟其他很多东西一样,这个错误在官方文档里也是无从查起的。简而言之,Angular依赖参数名来进行依赖注入。压缩器压根意识不到这个这跟Angular里普通的参数名有啥不同,尽可能的把脚本变短是他们职责。咋办?用“友好压缩法”来进行方法注入。看这里:
1 2 3 4 5 6 7 8 | module.service( 'myservice' , function ( $http , $q ) {
});
to this:
module.service( 'myservice' , [ '$http' , '$q' , function ( $http , $q ) {
}]);
|
登录后复制
这个数组语法很好的解决了这个问题。我的建议是从现在开始照这个方法写,如果你决定压缩JavaScript,这个方法可以让你少走很多弯路。好像是一个automatic rewriter机制,我也不太清楚这里面是怎么工作的。
最终一点建议:如果你想用数组语法复写你的functions,在所有Angular依赖注入的地方应用之。包括directives,还有directive里的controllers。别忘了逗号(经验之谈)
1 2 3 4 5 6 7 8 9 10 11 12 | module.directive( 'directive-with-controller' , [ 'myservice' , function (myservice) {
return {
controller: [ '$timeout' , function ( $timeout ) {
}],
link : function (scope, element, attrs, ctrl) {
}
}
}]);
|
登录后复制
注意:link function不需要数组语法,因为他并没有真正的注入。这是被Angular直接调用的函数。Directive级别的依赖注入在link function里也是使用的。
Directive永远不会‘完成'
在directive中,一个令人掉头发的事就是directive已经‘完成'但你永远不会知道。当把jQuery插件整合到directive里时,这个通知尤为重要。假设你想用ng-repeat把动态数据以jQuery datatable的形式显示出来。当所有的数据在页面中加载完成后,你只需要调用$(‘.mytable).dataTable()就可以了。 但是,臣妾做不到啊!
为啥呢?Angular的数据绑定是通过持续的digest循环实现的。基于此,Angular框架里根本没有一个时间是‘休息'的。 一个解决方法就是将jQuery dataTable的调用放在当前digest循环外,用timeout方法就可以做到。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | angular.module( 'table' ,[]).directive( 'mytable' , [ '$timeout' , function ( $timeout ) {
return {
restrict : 'E' ,
template: '<table class="mytable">' +
'<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" ]
$timeout ( function () {
$( '.mytable' , element).dataTable();
}, 0)
}
}
}]);
|
登录后复制