【实例分解二】angularjs根据路由按需加载Controller
开始笔记之前,把早上检测到的angularjs中的命名问题做一下记录。
检测工具:google浏览器扩展工具angularJS,结果如下:
angularjs中,module要遵守lowerCamelCase原则,例:"myApp"; controller要遵守UpperCamelCase原则并且要以Controller结尾,例:"MainController".
这一篇笔记主要对angularjs根据路由按需加载Controller的操作进行了说明,也就是上一篇中提到的routeConfig这个引用的文件。
首先在app.js文件中引用该模块并将angularjs的$controllerProvider服务传入该对象中,我们要用到$controllerProvider对加载进来的controller文件进行依赖关系的注入,这样才能达到我们的目的。
1 define(['angular', 'routeConfig'], function(angular, routeConfig) { 2 var app = angular.module('myApp', ['ngRoute','ngDialog', 3 function($controllerProvider) { 4 routeConfig.setControllerProvider($controllerProvider); 5 } 6 ]); 7 return app; 8 })
routeConfig:
1 define([], function() { 2 3 var $controllerProvider; 4 5 function setControllerProvider(value) { 6 $controllerProvider = value; 7 } 8 9 function config(templateUrl, controllerName) { 10 if (!$controllerProvider) { 11 throw new Error("$controllerProvider is not set!"); 12 } 13 14 var defer, 15 routeDefinition = {}; 16 17 routeDefinition.templateUrl = templateUrl; 18 routeDefinition.controller = controllerName; 19 routeDefinition.resolve = { 20 delay: function($q, $rootScope) { 21 defer = $q.defer(); 22 var dependencies = [controllerName]; 23 require(dependencies, function() { 24 var controller = arguments[0]; 25 $controllerProvider.register(controllerName, controller); 26 defer.resolve(); 27 $rootScope.$apply() 28 }) 29 return defer.promise; 30 } 31 } 32 return routeDefinition; 33 } 34 35 return { 36 setControllerProvider: setControllerProvider, 37 config: config 38 } 39 })
route.js配置信息
1 define(['app', 'routeConfig'], function(app, routeConfig) { 2 return app.config(function($routeProvider) { 3 //TemplateURl相对于index.html路径,Controller相对于route.js路径 4 $routeProvider.when('/link', routeConfig.config('../link/link.html', "../items/link/linkCtrl")); 5 $routeProvider.when('/user', routeConfig.config('../user/user.html', "../items/user/userCtrl")); 6 $routeProvider.when('/message', routeConfig.config('../message/message.html', "../items/message/msgCtrl")); 7 $routeProvider.otherwise({ 8 redirectTo: '/link' 9 }); 10 }); 11 })
主要对ngroute配置中resolve方法进行配置 ,在方法中利用requireJS加载Controller文件,通过$controllerProvider注入到angular作用域中,这样就实现 了动态加载的目的。
只能讲成这样了。。
下一篇说说ngDialog如何实现 动态加载Controller文件,实现对话框的复用。