自从上一篇文章到现在已经有将近一个月的时间，我将精力放在了前端页面分解与组装，和angularjs如何与jquery、bootstrap、D3等一系列其他类库结合使用的经验总结上。由于公司新招了一些员工，对于我而言快速的做出demo页面用以示范，是让新人快速上手的最佳方案。即使这段时间工作较忙，写这样大段文字的时间确实不好找，但我依然必须勤做记录，否则灵感如昙花一现转瞬即逝，如何带领新人，推动项目？故而我只能知无不言，把我所关注过的大小重点都记录下来。
那么接下来我先讲讲用angularjs如何实现前端分页。
在我的上一篇文章angularJs项目实战！01：模块划分和目录组织 可以看到，我所作的应用根据用户权限和功能划分了5个模块，每个模块都有不同的入口点。 这就产生了一个问题，模块之间有许多相同的内容——包括模板、组件、和通用JS模块。前端有一个特点，就是变更频繁。从项目一开始就是如此。故而，我们必须把这些相同的内容抽取出来，这样一旦遇到变更，就很容易修改。否则，你更改一个logo就要改5个模块的不同页面，累不说，出错的概率也是非常之大。这点相信大家都有所理解。
过去，这个工作一般都是后台动态脚本来完成，我们大家也很熟悉。 例如在php中，你可以把首页模板index.php划分为header.php, container.php, footer.php三个文件，然后通过include等方法来组装。同样的功能放在前端有点不一样。 angularJs提供了三个方法来进行前端分页，
其一，使用ng-view.这个方法是angular小组推荐使用的方案。通过使用路由控制，可以方便的实现页面组合。但这个方法也有一个重大缺点，就是一个html文件中，只能有一个ng-view.为什么只能有一个？事实上github已经有人给angular小组提出了自己的方法，通过给ng-view指定不同的名称，路由的时候也需要指定显示在哪个ng-view里，从而实现同一html中多个ng-view的绑定。但是，截止到1.1.5版，这个方案依旧没有被官方采纳。这个问题我想谷歌angular小组肯定有自己的理由。是担心路由混乱还是害怕搞出类似过去开发常见的iframe地狱？这个问题我没有深究。若有高玩告诉我，这里我就先谢谢了。这个问题我止步于Ui-router,一个angularjs的扩展。有兴趣的同学可以去了解一下。 http://angular-ui.github.io/
其二，将分解的页面写成directive. 例如下面这个样子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
angular.module('pageComponents', [], function($compileProvider){
$compileProvider.directive('commonHeader', function($compile) {
return {
templateUrl: 'application/views/frontEnd/build/templete/common/common_header.html',
replace: true,
transclude: false,
restrict: 'A',
scope: false
};
});
$compileProvider.directive('commonFooter', function($compile) {
return {
templateUrl: 'application/views/frontEnd/build/templete/common/common_footer.html',
replace: true,
transclude: false,
restrict: 'A',
scope: false
};
});
});
|
事实上，还可以更进一步，将templateUrl写成可传入的参数。但是那样的话就跟下面这个方法差不多了。
第三，使用ng-include
这里最好先看一下angularjs的API:http://docs.angularjs.org/api/ng.directive:ngInclude
使用ng-include非常简单。请注意src的参数是表达式，如果要传静态的字符串参数，请用引号将参数包裹起来。就像下面这个例子。
<div ng-include src=”‘example.html’”></div>
利用ng-include，再结合ng-view,实现之前所说的页面分解和组装已经很容易了，将主页面index.html分解为header.html\container.html\footer.html三部分，我们前端可以这样实现分解与组合：
<!– header –>
<ng-include src=”‘common_header.html’”></ng-include>
<div class=”container”>
<div ng-view></div>
</div><!– /container –>
<!– Footer –>
<ng-include src=”‘common_footer.html’”></ng-include>
对ng-include稍作处理，可以实现更复杂的功能。例如下面这个动态加载表单页面的例子，就是通过变换ng-include的src参数实现的。
|
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
|
$compileProvider.directive("dynamicFormInput", ['$http', '$templateCache',
function($http, $templateCache) {
return {
restrict : 'E',
scope : {
model : '=',
section : '='
},
template : '<ng:include src="tpl"></ng:include>',
link : function(scope, iElement, iAttrs) {
switch(scope.section.sectionTypeId) {
case 1:
$http.get('partials/survey/textInput.html', {
cache : $templateCache
});
scope.tpl = "partials/survey/textInput.html";
break;
case 2:
$http.get('partials/survey/selectOneOption.html', {
cache : $templateCache
});
scope.tpl = "partials/survey/selectOneOption.html";
break;
case 3:
$http.get('partials/survey/multiSelectOption.html', {
cache : $templateCache
});
scope.tpl = "partials/survey/multiSelectOption.html";
break;
case 4:
$http.get('partials/survey/boolean.html', {
cache : $templateCache
});
scope.tpl = "partials/survey/boolean.html";
break;
case 5:
$http.get('partials/survey/multiSelectOption.html', {
cache : $templateCache
});
scope.tpl = "partials/survey/multiSelectOption.html";
break;
case 6:
if (scope.section.sectionId == 19) {
$http.get('partials/survey/addressSelection.html', {
cache : $templateCache
});
scope.tpl = "partials/survey/addressSelection.html";
}
break;
}
}
}
}]);
|
最后必须说明的是，这三种方法实质上都是利用ajax来加载模板。使用ajax来实现页面分解这样的功能，相比传统的使用后台动态脚本语言的方案，必然会带来额外的开销。事实上，不光angularjs是这样，我所接触过的所有前端框架都是如此。这是浏览器端的宿命。这里所造成的负载和与后台动态脚本语言之间的优劣，只能由技术主管自己权衡。
下一篇文章将谈谈angularjs框架如何与其他类库进行协作。一些原教旨主义者认为既然使用了angularjs，那么所有的地方都得用angularjs来封装，就算被逼使用了jquery-ui，也要把使用的jquery-ui组件封装成angularjs的directives才能用。与之相反，本人是支持在angularjs的模块中写jquery代码的。一开始我也很注意能用angular的地方就不写jquery之类的代码，能用angular方法就用angular的方法。结果很明显，在添加了很多其他内容之后，一个个全用directives封装起来不现实。几十个只用一次的D3的chart，都让我封装一遍这不是自己给自己找事吗？诚然，封装起来会很好看，符合angularjs规范，但是不封装也不见得就很难维护了（我的模块拆分的很细，就算出现jquery-ui和D3的代码也很明确，从html模板的class标签上就能看出来）。
最后，推荐给大家破狼的博客，http://www.cnblogs.com/whitewolf/p/angularjs-start.html。他对angularjs研究的不错，有数次项目的经验。国内的十几个我看过的研究angularjs的博客，我第一个推荐他。（我在博客园上也注册账号了，叫张迪-西北泡面王，只评论，不发文章。发文章，这里就足够了。要是能同步就更好了。）