【实例分解二】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文件，实现对话框的复用。