【實例分解二】angularjs根據路由按需加載Controller

開始筆記之前，把早上檢測到的angularjs中的命名問題做一下記錄。

檢測工具：google瀏覽器擴展工具angularJS，結果如下：



angularjs中，module要遵守lowerCamelCase原則，例:"myApp"; controller要遵守UpperCamelCase原則並且要以Controller結尾，例："MainController".


這一篇筆記主要對angularjs根據路由按需加載Controller的操作進行了說明，也就是上一篇中提到的routeConfig這個引用的文件。

首先在app.js文件中引用該模塊並將angularjs的$controllerProvider服務傳入該對象中，我們要用到$controllerProvider對加載進來的controller文件進行依賴關系的注入，這樣才能達到我們的目的。

define(['angular', 'routeConfig'], function(angular, routeConfig) {
        var app = angular.module('myApp', ['ngRoute','ngDialog',
                function($controllerProvider) {
                        routeConfig.setControllerProvider($controllerProvider);
                }
        ]);
        return app;
})

 

routeConfig:

define([], function() {

        var $controllerProvider;

        function setControllerProvider(value) {
                $controllerProvider = value;
        }

        function config(templateUrl, controllerName) {
                if (!$controllerProvider) {
                        throw new Error("$controllerProvider is not set!");
                }

                var defer,
                        routeDefinition = {};

                routeDefinition.templateUrl = templateUrl;
                routeDefinition.controller = controllerName;
                routeDefinition.resolve = {
                        delay: function($q, $rootScope) {
                                defer = $q.defer();
                                var dependencies = [controllerName];
                                require(dependencies, function() {
                                        var controller = arguments[0];
                                        $controllerProvider.register(controllerName, controller);
                                        defer.resolve();
                                        $rootScope.$apply()
                                })
                                return defer.promise;
                        }
                }
                return routeDefinition;
        }

        return {
                setControllerProvider: setControllerProvider,
                config: config
        }
})

 

route.js配置信息

define(['app', 'routeConfig'], function(app, routeConfig) {
        return app.config(function($routeProvider) {
            //TemplateURl相對於index.html路徑，Controller相對於route.js路徑
                $routeProvider.when('/link', routeConfig.config('../link/link.html', "../items/link/linkCtrl"));
                $routeProvider.when('/user', routeConfig.config('../user/user.html', "../items/user/userCtrl"));
                $routeProvider.when('/message', routeConfig.config('../message/message.html', "../items/message/msgCtrl"));
                $routeProvider.otherwise({
                        redirectTo: '/link'
                });
        });
})

 

主要對ngroute配置中resolve方法進行配置 ，在方法中利用requireJS加載Controller文件，通過$controllerProvider注入到angular作用域中，這樣就實現 了動態加載的目的。

只能講成這樣了。。

下一篇說說ngDialog如何實現 動態加載Controller文件，實現對話框的復用。