首页 > 前端技术 > angularJs项目实战!02:前端的页面分解与组装
2013
08-26

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. 例如下面这个样子:

事实上,还可以更进一步,将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参数实现的。

最后必须说明的是,这三种方法实质上都是利用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的博客,我第一个推荐他。(我在博客园上也注册账号了,叫张迪-西北泡面王,只评论,不发文章。发文章,这里就足够了。要是能同步就更好了。)


angularJs项目实战!02:前端的页面分解与组装》有 5 条评论

  1. kazaff 说:

    长期关注这个主题,希望早日看到博主的更新~

  2. 小哥 说:

    lz遇到个问题,能不能帮个忙http://ruby-china.org/topics/16773

  3. 戴夏清 说:

    话说能不能分享点jquery这类类库结合使用的例子

留下一个回复

你的email不会被公开。