通过requirejs的配置让angularJS可以正常运行。以下是配置的步骤:
环境需求
- require.js
- angular.js
有了这两文件,就可以进行下一步了,具体将文件放到哪个目录,可以跟项目的目录结构走,无所谓。
配置步骤
首先要配置require.js的入口文件main.js
require.config({ //配置angular的路径 paths:{ "angular":"js/angular", }, //这个配置是你在引入依赖的时候的包名 shim:{ "angular":{ exports:"angular" } } })
配置地址的时候容易出错,这里需要些耐心。
下一步是最关键的一步了,我在弄的时候被绕懵了好几次,英文网站上的教程用的名词容易分不清,英文不好是硬伤。。。
我们平常在写angular的时候是这样写的:
var app = angular.module("模块名",[]); app.controller("foo",function($scope){}); app.directive(...)
可以看到,几乎所有的操作都是在app上进行的。那么,在使用requirejs的时候,我们通常是这样写模块的:
define(["jquery"],function($){})
而两者结合起来理想中应该是这样的:
//ctrl.js
define(['app'],function(app){ app.controller("mainController",function($scope){ ... }) })
//dirct.js
define(['app'],function(app){ app.directive("xxx",function(scope){ ... }) })
可以看到,我们在编写controller和directive(或者service等等)的时候,都需要将方法作用在app
上,那么这个app是什么的呢,其实可以想到,
就是angular.module("模块名",[])
那么,如何让所有的模块都能引入angular.module("模块名",[])呢,我们新建一个app.js
define(["angular","angular-route"],function(angular){ return angular.module("模块名",[]); })
这样,我们在引入app.js的时候,就可以拿到这个angular module了。
当这些步骤都做完之后,你会发现,这个程序还是跑步起来。所以我们还有最后一步。在启动一个angular程序的时候,需要把所有使用angularjs编写的模块都加载到页面中,要不然肯定会报错。。所以,我们需要一个angular的加载模块,这里我们可以在main.js里面添加
//main.js完整版
require.config({
//配置angular的路径
paths:{
"angular":"js/angular",
"ctrl:"js/ctrl",
"dirct":"js/dirct",
"app":"js/app"
},
//这个配置是你在引入依赖的时候的包名
shim:{
"angular":{
exports:"angular"
}
}
});
require(["angular","ctrl","dirct","app"], function(angular) { angular.bootstrap(document,["app"]); });
angular.bootstrap
方法是angular自带的,顾名思义,如果手工去调用,就是启动一个angular app的意思。具体看文档。
这样,在你的页面中引入<script src="js/require.js" data-main="js/main.js"></script>,就可以运行angular程序了!
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="js/require.js" data-main="js/main.js"></script> </body> </html>
以上需要注意的地方:
1、index.html页面不要添加ng-app指令,否则会报错,详情请参考angularjs的加载流程,使用require.js时推荐使用angularjs手动加载方式
angular.bootstrap(document,["app"],不用使用自动加载;
2、如上配置完之后,页面的加载会有闪烁,于是将模板中的{{xxx}}都改成了ng-bind的形式。改完了之后从页面渲染完到angular将数据填充完毕的那几百毫秒还是会闪一下。于是我想出了个hack,就是现在body或者某父标签上加一个class这个class是负责visibility:hidden
的。等到angular把数据填充完毕,再用jQuery把那个class remove掉,这样就不会有闪烁了,进来先是空白的,然后一下子出来,也比较符合平常的用户习惯。
参考文档:http://www.startersquad.com/blog/angularjs-requirejs/