Angularjs1.0 + ui.route 实现懒加载按需加载

项目结构

.
├── README.md
├── app
│   ├── index.html
│   └── single.html
└── js
    ├── angularjs
    │   ├── angular-1.5.8.min.js
    │   ├── angular-route.js
    │   ├── angular-ui-router.js
    │   ├── angular-ui-router.min.js
    │   └── ocLazyLoad.min.js
    ├── app.js
    └── singlecontroller.js

核心，按需求加载文件，对route进行重定义（app.js）

var App = angular.module('AppConfigService', ['ui.router', 'oc.lazyLoad']);
App.provider('appConfig', ['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    this.module = function (modules) {
        $ocLazyLoadProvider.config({modules: modules});
    };
    this.otherwise = function (url) {
        $urlRouterProvider.otherwise(url);
        return this;
    };

    this.state = function (stateObj) {
        var deps = [];
        if (stateObj.deps) {
            deps = stateObj.deps.names;
            if (!deps)
                deps = [];

            if (stateObj.deps.files && stateObj.deps.files.length)
                deps.push(
                    {
                        name: 'BayerApp',
                        serie: true,
                        insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
                        files: stateObj.deps.files
                    });
        }
        $stateProvider.state(stateObj.name, {
            url: stateObj.url,
            templateUrl: stateObj.templateUrl || 'views/' + stateObj.name + '.html',
            controller: stateObj.controller,
            resolve: {
                loadFiles: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load(deps);
                }]
            }
        });
        return this;
    };
    this.$get = function () {
        return null;
    }
}]);

注入创建的服务，并使用（app.js）：

var AppConfig = angular.module('BayerApp', ['AppConfigService']);
AppConfig.config(['appConfigProvider', function (appConfigProvider) {
    appConfigProvider.module([]);
    appConfigProvider
        .otherwise('/single')
        .state({
            name: 'single',
            url: '/single',
            templateUrl: 'spa/views/single.html',
            controller: "SingleController",
            deps: {
                names: [],
                files: [
                    'spa/controllers/singlecontroller.js'
                ]
            }
        })
}]);

增加一个controller（app.js）:

App.controller("SingleController", function ($scope, $http) {
    $scope.controller = function () {
        alert('angular controller.');
    };
});

html界面

<!DOCTYPE html>
<html lang="en" ng-app="BayerApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- angular -->
    <script src="../js/angularjs/angular-1.5.8.min.js"><//script>
    <script src="../js/angularjs/angular-route.js"><//script>
    <script src="../js/angularjs/angular-ui-router.js"><//script>
    <script src="../js/angularjs/ocLazyLoad.min.js"><//script>

    <script src="../js/app.js"><//script>
</head>
<body>
<div ui-view>hello angular!</div>
</body>
</html>

singlecontroller.js

function hello() {
    alert("hello!");
}

运行，即可。

Angularjs1.0 + ui.route 实现懒加载按需加载

项目结构

核心，按需求加载文件，对route进行重定义（app.js）

注入创建的服务，并使用（app.js）：

增加一个controller（app.js）:

html界面

singlecontroller.js

git源码地址:

昵称