angularJs项目实战!02:前端的页面分解与组装
2017-01-22 15:00
375 查看
自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和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. 例如下面这个样子:
第三,使用ng-include
这里最好先看一下angularjs的API:http://docs.angularjs.org/api/ng.directive:ngInclude
使用ng-include非常简单。请注意src的参数是表达式,如果要传静态的字符串参数,请用引号将参数包裹起来。就像下面这个例子。
对ng-include稍作处理,可以实现更复杂的功能。例如下面这个动态加载表单页面的例子,就是通过变换ng-include的src参数实现的。
下一篇文章将谈谈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://community.angular.cn/A0d9
null
那么接下来我先讲讲用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. 例如下面这个样子:
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稍作处理,可以实现更复杂的功能。例如下面这个动态加载表单页面的例子,就是通过变换ng-include的src参数实现的。
$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://community.angular.cn/A0d9
null
相关文章推荐
- angularJs项目实战!02:前端的页面分解与组装
- 【初探移动前端开发02】移动设备的页面
- 17讲项目实战签证页面
- iOS项目开发实战——使用三种方式实现页面跳转与参数传递(二)
- iOS项目开发实战——使用三种方式实现页面跳转与参数传递(一)
- 网络应用系统---系统设计架构个人项目实战示例(各种页面代码A)
- 【项目实战】项目新特性页面总结
- 29讲项目实战:404页面制作+网站友情链接调用
- 一次自动化发现攻击脚本且调用前端页面快速下发配置项目的随笔
- AngularJS 项目开发实战
- java项目实战-计算器(页面布局学习 添加事件)
- angularJs项目实战!01:模块划分和目录组织
- (3)前端项目AngularJS的第三部分总结
- 【初探移动前端开发02】移动设备的页面
- lemon oa前端页面——由user-base-list谈项目组织
- 项目视频讲解_基于LigerUI前端技术实现的管理平台(纯静态页面,json,工作流及权限管理)
- angularJs项目实战
- (2)前端AngularJS项目party_bid的第一部分总结
- angularjs实战项目01-构建开发环境
- Android实战 - 个人App 乐逗项目 (实现初始化页面,引导页)