【實例分解二】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文件，實現對話框的複用。