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:'&lt;ng:include src="tpl"&gt;&lt;/ng:include&gt;',
                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的博客,我第一个推荐他。(我在博客园上也注册账号了,叫张迪-西北泡面王,只评论,不发文章。发文章,这里就足够了。要是能同步就更好了。)

上一篇:“大话架构”阿里架构师分享Java程序员需要突破的技术要点


下一篇:SQL SERVER 查询Job作业基本信息及执行情况