开始笔记之前，把早上检测到的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: config38         }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文件，实现对话框的复用。