AngularJs、RequireJs、AngularAMD、ui-router搭建的JS文件动态加载

如今页面的复杂度极高，需要加载的脚本文件极多，降低了用户体验，所以写了这个动态加载脚本的demo，欢迎交流：

1. 主页：requireJs 入口：data-main="mian.js"，如下：

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

由上面app.js中书写的默认路由及路由，我们知道，页面打开的时候它会跳转到默认路由，也就是会加载上面的所有页

面及脚本。