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

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

目录结构:

AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service_第1张图片

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

AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service_第2张图片

接下来要做的是,切换到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: $compileProvider.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上

 

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

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

你可能感兴趣的:(AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service)