如今页面的复杂度极高，需要加载的脚本文件极多，降低了用户体验，所以写了这个动态加载脚本的demo，欢迎交流：
1. 主页：requireJs 入口：data-main="mian.js"，如下：
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" data-main="main.js" src="../lib/requireJs/2.1.20/require.min.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
2. main.js
require.config({
baseUrl : '/AngularJsClass/app',//脚本加载的相对路径，后面的动态加载脚本都是相对于这个路径写的，如果您非要写全路径，
可以忽略这个路径，但是您在加载的时候得书写完整，如：加载js文件：/AngularJsClass/app/views/main/rightList/rightList.js
忽略baseUrl的写法："views/main/rightList/rightList"
未忽略："/AngularJsClass/app/views/main/rightList/rightList.js"
注意上面的区别，这点很重要，要不然会出现无法动态加载脚本的尴尬。
paths : {//依赖的模块
"angular" : "/AngularJsClass/lib/angular/angular.min",
"angularAMD" : "/AngularJsClass/lib/angularAMD/angularAMD.min",
"ngLoad" : "/AngularJsClass/lib/angularAMD/ngload.min",
"angularUiRouter" : "/AngularJsClass/lib/uiRouter/0.2.15/angular-ui-router.min",
},
shim : {//模块的依赖关系，这个决定了加载的优先级
"angular" : {
experts : "angular",
},
"angularUiRouter" : {
deps : ["angular"],
experts : "angularUiRouter"
},
"angularAMD" : {
deps : ["angular"],
experts : "angularAMD",
},
"ngLoad" : {
deps : ["angularAMD"],
experts : "ngLoad"
}
},
deps : ['app']//启动应用
});
3. app.js
define(['angularAMD','angularUiRouter','angular','ngLoad'],function (angularAMD){
var app = angular.module('app',['ui.router']);
app.run(function($rootScope,$state,$stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
app.config(function($stateProvider,$rootScopeProvider,$urlRouterProvider,$controllerProvider){//路由
$urlRouterProvider.otherwise('/main/index');//页面默认路由
$stateProvider
.state('main',angularAMD.route({
url : '/main',
templateUrl : '../app/views/main/main.html'
}))
.state('main.index',angularAMD.route({
url : '/index',
views : {
'rightList@main' : angularAMD.route({
templateUrl : 'views/main/rightList/rightList.html',
controller : 'rightListController',
controllerUrl : 'views/main/rightList/rightList',//对应第一点的未忽略baseURL的写法，上面没看懂可以结合一下看，这里的这个js文件就是动态加载的
}),
'content@main' : angularAMD.route({
templateUrl : 'views/main/content/content.html',
controller : 'contentController',
controllerUrl : 'views/main/content/content',
})
}
}))
});
return angularAMD.bootstrap(app);
})
4. main.html
<!--代表右侧的导航栏-->
<div ui-view="rightList"></div>
<!--代表页面的内容-->
<div ui-view="content"></div>
由上面app.js中书写的默认路由及路由，我们知道，页面打开的时候它会跳转到默认路由，也就是会加载上面的所有页面及脚本。
