angularJs项目实战！02：前端的页面分解与组装

自从上一篇文章到现在已经有将近一个月的时间，我将精力放在了前端页面分解与组装，和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){                         case1:                             $http.get('partials/survey/textInput.html',{                                 cache:$templateCache                             });                             scope.tpl="partials/survey/textInput.html";                             break;                         case2:                             $http.get('partials/survey/selectOneOption.html',{                                 cache:$templateCache                             });                             scope.tpl="partials/survey/selectOneOption.html";                             break;                         case3:                             $http.get('partials/survey/multiSelectOption.html',{                                 cache:$templateCache                             });                             scope.tpl="partials/survey/multiSelectOption.html";                             break;                         case4:                             $http.get('partials/survey/boolean.html',{                                 cache:$templateCache                             });                             scope.tpl="partials/survey/boolean.html";                             break;                         case5:                             $http.get('partials/survey/multiSelectOption.html',{                                 cache:$templateCache                             });                             scope.tpl="partials/survey/multiSelectOption.html";                             break;                         case6:                             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的博客，我第一个推荐他。（我在博客园上也注册账号了，叫张迪-西北泡面王，只评论，不发文章。发文章，这里就足够了。要是能同步就更好了。）