打赏

AngularJS + ui-router + RequireJS异步加载注册controller／directive／filter／service

一般情况下我们会将项目所用到的controller／directive／filter／sercive预先加载完再初始化AngularJS模块，但是当项目比较复杂的情况下，应该是打开对应的界面才加载对应的controller等资源，但是AngularJS一旦初始化，之后加载的controller／directive／filter／sercive是不会自动注册到模块上的。用AngularJS + ui-router + RequireJS来构建项目应该是比较常见的，所以我就基于这个条件来看看如何解决这个问题。

目录结构：

HTML结构非常简单，两个链接，分别改变路由切换到不同子页面：

<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配置文件路径，初始化模块

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模块

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切换到对应的子页面

接下来要做的是，切换到home界面要加载homeCtrl控制器，切换到local页面加载localCtrl控制器，我们将会用到$controllerProvider来手动注册控制器。怎么拿到$controllerProvider到引用呢？

对angular应用来说，模块对象是全局的，正好可以用来保存$controllerProvider的引用

 在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
    };
})

 接着在路由中配置要加载的控制器／指令／过滤器／服务

.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

posted @ 2016-01-15 09:04  wangmeijian  阅读(4639)  评论(13)  编辑  收藏  举报