angularJs中外部js的按需加载

身为初学者对angularJs中遇到的问题进行学习，望多多指教；angularJs中对于一些js，不需要全局引入是，我们可采用路由加载的方式进行加载

var microShop = angular.module('microShop', [ 'ngRoute','angularCSS'])
.config(['$routeProvider','$locationProvider','$httpProvider','$controllerProvider','$compileProvider','$filterProvider','$provide',
    function($routeProvider,$locationProvider,$httpProvider,$controllerProvider,$compileProvider,$filterProvider,$provide) {
        //$locationProvider.html5Mode(true).hashPrefix('!'),
   //异步加载js/css方法
    microShop.asyncjs = function (dependencies) {
        return function($q,$rootScope){
            var deferred = $q.defer();
            $script(dependencies, function() {
                $rootScope.$apply(function()
                {
                    deferred.resolve();
                });
            });

            return deferred.promise;
        }
   
    }    

    $routeProvider

       .when('/aa?:id', {
                templateUrl: 'view/aa.html?v=1',
                controller: 'aa',
                resolve: {
                    load:microShop.asyncjs([
                                               'js/common/swiper-3.3.0.jquery.min.js?v=2',
                                               'js/common/swiper-3.3.0.jquery.min.js?v=2',
                                               ]),
                    
                    data: ['title', function(title){
                        title.setWechatTitle("按需加载");
                   }]}
          })

 }])

这样可以减少第一次访问主页的速度，在写此加载方式时需要此module中加入按需加载的js方法

 //异步加载js方法
    microShop.asyncjs = function (dependencies) {
        return function($q,$rootScope){
            var deferred = $q.defer();
            $script(dependencies, function() {
                $rootScope.$apply(function()
                {
                    deferred.resolve();
                });
            });

            return deferred.promise;
        }
   
    }    

此外也需要在config中加入配置

.config(['$routeProvider','$locationProvider','$httpProvider','$controllerProvider','$compileProvider','$filterProvider','$provide','$cssProvider',

当然对于一些css引入，也可以使用路由的方式按需加载

var microShop = angular.module('microShop', [ 'ngRoute','productModule','insureModule','MShopMngModule','titleUtil','angularCSS'])
.config(['$routeProvider','$locationProvider','$httpProvider','$controllerProvider','$compileProvider','$filterProvider','$provide','$cssProvider',
    function($routeProvider,$locationProvider,$httpProvider,$controllerProvider,$compileProvider,$filterProvider,$provide,$cssProvider) {
        //$locationProvider.html5Mode(true).hashPrefix('!'),
   //异步加载js方法
    microShop.asyncjs = function (dependencies) {
        return function($q,$rootScope){
            var deferred = $q.defer();
            $script(dependencies, function() {
                $rootScope.$apply(function()
                {
                    deferred.resolve();
                });
            });

            return deferred.promise;
        }
   
    }
    

//css按需加载方法
    angular.extend($cssProvider.defaults, {
        container: 'head',
        method: 'append',
        persist: true,
        preload: true,
        bustCache: false
      });

    $routeProvider
            //首页
     

$routeProvider
            //首页
      .when('/index?:id', {
          templateUrl: 'view/index.html?v=3',
          controller: 'index',
          css: {
                  href: 'css/swiper.min.css',
            },
                resolve: {
                    load:microShop.asyncjs([
                                'js/common/swiper-3.3.0.jquery.min.js?v=2',
                                'js/common/ctrlHtml_zt.js?v=2',
                                'js/productModule/controller/Index.js?v=5'
                                ]),
                    
                    
                   data: ['$q','IndexList','title', function($q,IndexList,title){
                        title.setWechatTitle("首页");
                         var baseParam="{'pageName':'index','data':[{'dataType':'index'}]}";
                         var param=Base64.encode(baseParam);
                        return IndexList.getData(param).then(function(data){
                            return data;
                        });
                    }]

                },
          
         })