Angularjs1.x+ocLazyLoad+angular-ui-router+ui-router-extras

前言

总是听人说angularjs的学习曲线很高，个人认为ng的难度是有的，但是要说难到哪里，其实也不见得。总结来说，ng比较有难度的地方应当是路由和lazy加载。今天就把这部分内容通过一个小示例分享给大家。

依赖

1. Angularjs
2. angular-ui-router
3. ui-router-extras.js
4. ocLazyLoad.js

项目包结构

代码

index.html

<!Doctype html>
<html ng-app="Main">
    <head>
    </head>
    <body>
        <div ui-view>
        </div>
        <script src="lib/angular-1.4.8/angular.js"></script>
        <script src="lib/angular-ui-router/angular-ui-router.js"></script>
        <script src="lib/ui-router-extras/ct-ui-router-extras.js"></script>
        <script src="lib/oclazy/ocLazyLoad.js"></script>
        <script src="apps/main/MainModule.js"></script>
    </body>
</html>

MainModule.js

angular.module('Main',['ui.router', 'ct.ui.router.extras', 'oc.lazyLoad'])
.config(['$stateProvider', '$futureStateProvider', '$ocLazyLoadProvider',function($stateProvider, $futureStateProvider, $ocLazyLoadProvider){
    $futureStateProvider.addResolve(function($http){//从远程加载
        return $http({
            url : 'apps/main/states.json',
            method : "GET",
            headers : {
                'Content-Type' : 'application/json;charset=UTF-8'
            }
        }).then(function (resp) {
            if (resp && resp.data && resp.data) {
                angular.forEach(resp.data, function (appItem) {
                    var fstate = {
                        type: appItem.type,
                        stateName: appItem.stateName,
                        url: appItem.url,
                        load: [{
                            name: appItem.moduleName,
                            reconfig: true,
                            files: [appItem.src]
                        }]
                    };
                    $futureStateProvider.futureState(fstate);
                });
            }
        });
    });

    $futureStateProvider.stateFactory('ocLazyLoad', function($q, $ocLazyLoad, futureState) {
        var deferred = $q.defer();

        $ocLazyLoad.load(futureState.load).then(function() {
            deferred.resolve();
        }, function() {
            deferred.reject();
        });

        return deferred.promise;
    });

    $futureStateProvider.futureState({
        "type" : "ocLazyLoad",
        "stateName" : "login",
        "url" : "/login",
        load : {
            name: "LoginModule",
            reconfig: true,
            files: ["apps/login/LoginModule.js"]
        }
    });
}])
.run(['$state','$timeout',function($state,$timeout){
    $state.go('login');
}]);

states.json

[{
    "type" : "ocLazyLoad",
    "moduleName":"PageModule",
    "stateName" : "page",
    "url" : "/page",
    "src" : "apps/page/PageModule.js"
}]

LoginModule.js

angular.module('LoginModule',[])
.config(['$ocLazyLoadProvider','$stateProvider',function($ocLazyLoadProvider,$stateProvider){
    $stateProvider.state('login',{
        url : '/login',
        controller : 'LoginCtrl',
        templateUrl : 'apps/login/view/login.html',
        resolve : {
            controller : ['$ocLazyLoad',function($ocLazyLoad){
                return $ocLazyLoad.load({
                    name : 'LoginCtrlModule',
                    files : ['apps/login/controller/LoginCtrlModule.js']
                });
            }]
        }
    });
}]);

LoginCtrlModule.js

angular.module('LoginCtrlModule',[])
.controller('LoginCtrl',['$scope',function($scope){

}]);

login.html

<div>
    login page
    <a href="#/page/page1">go to page1</a>
    <a href="#/page/page2">go to page2</a>
</div>

PageModule.js

angular.module('PageModule',[])
.config(['$ocLazyLoadProvider','$stateProvider','$futureStateProvider',function($ocLazyLoadProvider,$stateProvider,$futureStateProvider){
    $futureStateProvider.futureState({
        "type" : "ocLazyLoad",
        "stateName" : "page.page1",
        "url" : "/page1",
        load: [{
            name: "Page1Module",
            reconfig: true,
            files: ["apps/page/page1/Page1Module.js"]
        }]
    });

    $futureStateProvider.futureState({
        "type" : "ocLazyLoad",
        "stateName" : "page.page2",
        "url" : "/page2",
        load: [{
            name: "Page2Module",
            reconfig: true,
            files: ["apps/page/page2/Page2Module.js"]
        }]
    });

    $stateProvider.state('page',{
        url : '/page',
        template : '<div>I am the page.</div><div ui-view></div>'
    });
}]);

Page1Module.js

angular.module('Page1Module',[])
.config(['$ocLazyLoadProvider','$stateProvider',function($ocLazyLoadProvider,$stateProvider){
     $stateProvider.state('page.page1',{
        url : '/page1',
        controller : 'Page1Ctrl',
        templateUrl : 'apps/page/page1/view/page1.html',
        resolve : {
            controller : ['$ocLazyLoad',function($ocLazyLoad){
                return $ocLazyLoad.load({
                    name : 'Page1CtrlModule',
                    files : ['apps/page/page1/controller/Page1CtrlModule.js']
                });
            }]
        }
    });
}]);

Page1CtrlModule.js

angular.module('Page1CtrlModule',[])
.controller('Page1Ctrl',['$scope',function($scope){

}]);

page1.html

<div>
    I m the page1.
    <a href="#/login">go to login.</a>
</div>

Page2Module.js

angular.module('Page2Module',[])
.config(['$ocLazyLoadProvider','$stateProvider',function($ocLazyLoadProvider,$stateProvider){
     $stateProvider.state('page.page2',{
        url : '/page2',
        controller : 'Page2Ctrl',
        templateUrl : 'apps/page/page2/view/page2.html',
        resolve : {
            controller : ['$ocLazyLoad',function($ocLazyLoad){
                return $ocLazyLoad.load({
                    name : 'Page2CtrlModule',
                    files : ['apps/page/page2/controller/Page2CtrlModule.js']
                });
            }]
        }
    });
}]);

Page2CtrlModule.js

angular.module('Page2CtrlModule',[])
.controller('Page2Ctrl',['$scope',function($scope){

}]);

page2.html

<div>
    I m the page2.
    <a href="#/login">go to login.</a>
</div>

说明

整个示例是我个人亲自己写的，真心希望对大家有所帮助。可能有人想问一些其他的问题，比如指令什么的。个人感觉这些都是比较基础的东西，所以不在这里说了，有需要讨论的欢迎留言。对于本文里所讲的东西，如果有不明白的地方，可以联系我，一起交流学习。微信号：472575390.