AngularJS + ui-router + RequireJS異步加載註冊controller／directive／filter／service

時間 2019-11-16

標籤 angularjs router requirejs 異步加載註冊 controller directive filter service 欄目 AngularJS 简体版

原文原文鏈接

通常狀況下咱們會將項目所用到的controller／directive／filter／sercive預先加載完再初始化AngularJS模塊，可是當項目比較複雜的狀況下，應該是打開對應的界面才加載對應的controller等資源，可是AngularJS一旦初始化，以後加載的controller／directive／filter／sercive是不會自動註冊到模塊上的。用AngularJS + ui-router + RequireJS來構建項目應該是比較常見的，因此我就基於這個條件來看看如何解決這個問題。javascript

目錄結構：html

HTML結構很是簡單，兩個連接，分別改變路由切換到不一樣子頁面：java

<html>
    <head>
        <title>AngularJS + ui-router + RequireJS異步加載註冊controller</title>
    </head>
    <body>
        <a href="#home">home</a>
        <a href="#local">local</a>
        <div ui-view></div>
        <script type="text/javascript" src="js/require.js" data-main="js/main"></script>
    </body>
</html>

main.js配置文件路徑，初始化模塊git

require.config({
    baseUrl: 'js',
    paths: {
        'app': 'app',
        'angular': 'angular.min',
        'router': 'angular-ui-router'
    },
    shim: {
        'router': {
            deps: ['angular']
        }
    }
})
// 手動初始化myModule模塊
require(['app'],function(){
    angular.bootstrap(document, ['myModule'])
})

app.js配置路由並返回myModule模塊github

define(['router'],function(){
    var app = angular.module("myModule", ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('home');
        $stateProvider
        .state("home",{
            url:"/home",
            template: '<p>這裏是home頁面</p>'
        })
        .state("local",{
            url:"/local",
            template: '<p>這裏是local頁面</p>'
        })
    })
　　return app;
})

界面以下，如今能夠點擊home和local切換到對應的子頁面bootstrap

接下來要作的是，切換到home界面要加載homeCtrl控制器，切換到local頁面加載localCtrl控制器，咱們將會用到$controllerProvider來手動註冊控制器。怎麼拿到$controllerProvider到引用呢？promise

對angular應用來講，模塊對象是全局的，正好能夠用來保存$controllerProvider的引用app

在app.js文件define內部加上如下代碼異步

app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){        
    app.register = {
        //獲得$controllerProvider的引用
        controller : $controllerProvider.register,
        //一樣的，這裏也能夠保存directive／filter／service的引用
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        service: $provide.service
    };
})

接着在路由中配置要加載的控制器／指令／過濾器／服務ide

.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('home');
    $stateProvider
    .state("home",{
        url:"/home",
        controller: 'homeCtrl',
        template: '<p>{{str}}</p>',
        resolve: {
            loadCtrl: ["$q", function($q) { 
                var deferred = $q.defer();
                //異步加載controller／directive/filter/service
                require([
                    'controller/homeCtrl' 
                ], function() { deferred.resolve(); });
                return deferred.promise;
            }]
        }
    })
    .state("local",{
        url:"/local",
        controller: 'localCtrl',
        template: '<p>{{str}}</p>',
        resolve: {
            loadCtrl: ["$q", function($q) { 
                var deferred = $q.defer();
                //異步加載controller／directive/filter/service
                require([
                    'controller/localCtrl'
                ], function() { deferred.resolve(); });
                return deferred.promise;
            }]
        }
    })
}])

最後是控制器的寫法，爲了省事就兩個寫在一塊了

define(['app'],function(app){
    app.register
    .controller('homeCtrl', function($scope){
        $scope.str = 'home page';
    })    
    app.register
    .controller('localCtrl',function($scope){
        $scope.str = 'local page'
    })
})

刷新頁面，就能夠動態加載controller了。

directive/filter/service的寫法相似於controller，再也不贅述，本身動手豐衣足食。實例放在git上

3月21日更新：分別寫了controller、filter、Service、directive的簡單實例放到git上了

By：古德God於 2016/01/15 00:30:47

原文連接：http://www.cnblogs.com/wangmeijian/p/5020788.html