2.页面中的script标签中,会首先引用require.js这个文件,然后再去引用main.js这个文件,main.js主要是一些关于require的config信息,代码如下:
var config = {
baseUrl: &＃39;./&＃39;, //依赖相对路径
paths: { //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出
domReady:&＃39;domReady&＃39;,
angular: &＃39;../node_modules/angular/angular&＃39;,
app:&＃39;app&＃39;,
router:&＃39;../node_modules/angular-ui-router/release/angular-ui-router&＃39;
},
shim: { //引入没有使用requirejs模块写法的类库。例如underscore这个类库，本来会有一个全局变量&＃39;_&＃39;。这里shim等于快速定义一个模块，把原来的全局变量&＃39;_&＃39;封装在局部，并导出为一个exports，变成跟普通requirejs模块一样
&＃39;router&＃39;: {
deps: [&＃39;angular&＃39;], //依赖什么模块
},
&＃39;angular&＃39;: {
exports: &＃39;angular&＃39;
}
}
};
require.config(config);
// deps:[&＃39;webapp&＃39;]
require([&＃39;domReady&＃39;,&＃39;app&＃39;,&＃39;angular&＃39;],function(){
angular.bootstrap(document, [&＃39;webapp&＃39;])//这里会去执行app.js这个文件
})3.接下来进入app.js
/**
* Created by Administrator on 2016/7/28.
*/
define([&＃39;router&＃39;], function () {
var app = angular.module(&＃39;webapp&＃39;, [&＃39;ui.router&＃39;]);
app.config(
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(&＃39;module1&＃39;);//如果没有指定路由,会默认访问module1
$stateProvider.
state(&＃39;module1&＃39;, {
url:"/module1",
// controller: &＃39;ctr1&＃39;, //这里如果写了controller,那么在加载module1.js时,js文件里面的console.log()会运行两次
templateUrl: &＃39;module1/module1.html&＃39;,
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
&＃39;module1/module1&＃39;
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
.state("module2",{
url:"/module2",
// controller: &＃39;ctr2&＃39;,
templateUrl: &＃39;module1/module2.html&＃39;,
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
&＃39;module1/module2&＃39;
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
});
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register = {
//得到$controllerProvider的引用
controller : $controllerProvider.register,
//同样的，这里也可以保存directive／filter／service的引用
directive: $compileProvider.directive,
filter: $compileProvider.register,
service: $provide.service
};
})
return app;
});4.module1.js代码如下:
define([&＃39;app&＃39;],function(app){
app.register
.controller(&＃39;ctr1&＃39;, function($scope){
$scope.str = &＃39;home page&＃39;;
console.log(&＃39;page1&＃39;)
})
})5.module2.js代码如下:
define([&＃39;app&＃39;],function(app){
app.register
.controller(&＃39;ctr2&＃39;,function($scope){
$scope.str = &＃39;local page&＃39;;
console.log(&＃39;page2&＃39;)
})
})6.module1.html代码如下:
这是tp1
京公网安备 11010802041100号