angular1x初始与架构演进（三）Ui-Router+OcLazyLoad加载模块

七月份的时候有写过一篇OcLazyLoad文章，当时只是初略了解了一下，是为了解决当前项目加载模块过多的问题，但是最后发现项目中模块间耦合性过于复杂，然后项目给出的时间也不是很多，后面就放弃了，这次新项目中使用了。

加载js+css：

angular.module('myRouters', ['ui.router', 'oc.lazyLoad'])
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider','$ocLazyLoadProvider',
        function ($stateProvider, $urlRouterProvider, $locationProvider,$ocLazyLoadProvider) {
            $stateProvider
                .state('panoramic', {
                    url: '/panoramic',
                    views: {
                        'body': {
                            templateUrl: '../components/panoramic/panoramic.html',
                        },
                    },
                    resolve: {
                        loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                            return $ocLazyLoad.load(
                                [
                                    'css/components/panoramic/panoramic.css',
                                    '/controllers_panoramic.js'
                                ]);
                        }]
                    }
                })
        
        }]);

这种写法不支持按需加载指令，指令需要注入模块，模块：

通过OcLazyLoad申明一个模块名，跟引用js

$ocLazyLoadProvider.config({
                modules: [
                    {
                        name: 'tm.tags',
                        files: ['framework/angular/tm.tags.js']
                    }
                ]
            });

完整代码：

angular.module('myRouters', ['ui.router', 'oc.lazyLoad'])
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider','$ocLazyLoadProvider',
        function ($stateProvider, $urlRouterProvider, $locationProvider,$ocLazyLoadProvider) {
            $ocLazyLoadProvider.config({
                modules: [
                    {
                        name: 'tm.tags',
                        files: ['framework/angular/tm.tags.js']
                    }
                ]
            });
            $stateProvider
                .state('panoramic', {
                    url: '/panoramic',
                    views: {
                        'body': {
                            templateUrl: '../components/panoramic/panoramic.html',
                        },
                    },
                    resolve: {
                        loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                            return $ocLazyLoad.load(
                                [
                                    'tm.tags',
                                    'css/components/panoramic/panoramic.css',
                                    js + '/controllers.js',
                                    js + '/controllers_panoramic.js'
                                ]);
                        }]
                    }
                })

        }]);

这个就解决了Angular中：指令js、控制器js、样式、第三方库js的按需加载；

但是在实际开发中这样肯定是不满足需求，因为js跟css还是会有缓存

可以通过时间轴来移除这个缓存，下一篇通过gulp来实现