AngularJs集成RequireJs实现前端模块化的方法详解

阅读() @2018-07-15 14:13:42

近几年大家都提倡前端模块化,可是Javascript本身没有【类】的概念(ES6之后会新增类),不像PHP、JAVA等后端开发语言,所有的代码都是通过很多类来实现模块化,然后使用路由自由跳转使用某个控制器中的方法。

看了很多文章,最新的ES6还没有正式投入使用,所有目前前端的模块化基本是使用类似CommonJs这样的框架来做JS代码的按需加载,而在类似于CommonJS的框架中,RequireJs是被使用的最多的,所以我在项目开发中也选择了RequireJs作为前端代码模块化工具。

其中有一个项目,前端是用的AngularJs,如果用过AngularJs的童鞋肯定都知道,这个框架最厉害的就是路由、控制器、双向数据绑定、自定义指令、自定义服务、依赖注入等等,最开始的时候,我们把所有的controller代码全部写在一个controller.js文件中,所有的自定义服务server全部都写在了server.js文件中,如下图:

项目目录截图

然后在页面中用script标签按照依赖性的不同依次写到body标签的最下边。如下图:

传统javascript依赖加载方法

这个时候,如果我们想要查找某个控制器或者服务,必须得打开对应的js文件,然后用ctr+f的方法去搜索才能找到,更要命的是,如果项目体量比较大,js文件数量肯定会成倍增加,那它们之间的依赖关系就不要把握了,只要有一个加载顺序出错就会影响其他js文件运行,很麻烦。

所以我们把专业的事交给专业的工具去处理,使用RequireJs实现按需加载,我们只需要在配置文件里边指定文件之间的依赖关系即可,关于RequireJs的具体使用方法,可以参考《RequireJs入门教程学习》,作为RequireJs的入门教程,已经足够使用了。

想要将AngularJs集成在RrquireJs中实现前端模块化,最重要的是把原来的AngularJs代码重构成复合RequireJs的格式规范,我在处理这个问题的时候需要一些问题,最重要的是ng-app的加载:

在main.js(RequireJs配置文件)中写入如下代码:

require(['app', 'router', 'wrapController'], function(app){
	//angular.bootstrap方法是angular自带的,顾名思义,如果手工去调用,就是启动一个angular app的意思
	angular.bootstrap(document, ['app']);
});

如果不是用RequireJs,那么AngularJs框架加载完毕之后,会自动去渲染html中使用的ng-app的部分。

但是现在必须按照RequireJs的规范了,加载完需要的模块之后,会指定回调函数,要把angular.bootstrap这个方法写在回调函数里边,去渲染页面,否则没有效果的!

这样就不用在body中加入ng-app="app"了,对angular.bootstrap方法有疑问的童鞋可以自己百度一下,网上已经讲的很清楚了。

还有就是路径问题,比如这个项目indexController.js、listController.js或者是articleController.js文件中路径都是相对于主框架wrap.html而言的,非常容易出错。

AngularJS和RequireJs的使用方法,特点一定要非常清楚,不然一不小心就是坑!

项目在线预览地址:http://www.zymseo.com/demo/ar/wrap.html#/index/1

以下两种代码写法,最后实现的效果是一样的,但是AngularJs结合RequireJs显然代码更加清晰:

PHP+AngularJs+RequireJs构建的博客系统后台源码:https://github.com/zymseo/blog

AngularJs项目源码github地址:https://github.com/zymseo/angularTest

AngularJs+Require项目源码github地址:https://github.com/zymseo/ar/

微信二维码