在 index.html 里面引用 Requirejs。
<!-- lang: js -->
<script type="text/javascript"
src="bower_components/requirejs/require.js"
data-main="scripts/bootstrap.js">
</script>
这里第一部分src当然就是指requirejs的库文件。第二部分data-main是指入口配置。当前我指定的是scripts下面的bootstrap。requirejs默认的是js文件作为存档格式。所以不写bootstrap.js,直接写bootstrap也行。
然后在bootstrap中对模块进行配置,
<!-- lang: js -->
require.config({
baseURI: '../scripts', // 根目录。比如说下面的 'app' 模块,就会查找 scripts/app.js
paths:{
'angular' : './libs/angular/angular' // 以AMD格式写的js文件,到这里就可以了
},
shim:{
'angular' : {
exports : 'angular' // Angular不是AMD格式,所以必须向外重命名
}
}
});
下半段
<!-- lang: js -->
require(
[
'angular',
'app'
// 这里会直接找 'scripts/app.js' 模块。
// AMD不是可以定义id吗,但是这里如果在同一个app里面写两个define,
// 貌似是按照顺序加载第一个的。不太明白。以后看。
],
// 这里加载的是angular定义的模块。
// 嗯,开始出现了两个模块。RequireJS的模块和AngularJS的模块。麻烦。
function(angular){ angular.bootstrap(document, ['bearnose']); });
然后再看app.js中的定义:
<!-- lang: js -->
define(['angular'], function(angular){
var app = angular.module('bearnose', []);
app.controller("ctrlLogin", function($scope){
$scope.name = "Kitty";
});
return app;
});
前面的define是AMD的格式,后面的angular.module是AngularJS的格式。于是这两个就连接起来了。 运行一下,和原先那个一样。