angularjs应用ui-route异步加载组件

ui-route比拟于angularjs的原生视图路由更好地支撑了路由嵌套,状况转移等等。跟着视图不停增添,打包的js体积也会越来越大,比方我在运用内里用到了wangeditor内里零丁依靠的jquery就300多k。异步加载各个组件就很有必要。在这里我就以ui-route为框架来举行异步加载申明。

起首看一下路由加载文件

angular.module('webtrn-sns').config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state({
            name: 'home.message',
            url: '/message',
            abstract: true,
            templateProvider: ['resources', function (resources) {
                return resources.template
            }],
            controllerProvider: ['resources', (resources)=> {
                return resources.controller
            }],
            onEnter: ['resources', (resources)=>resources.css.use()],
            onExit: ['resources', (resources)=>resources.css.unuse()],
            resolve: {
                resources: ()=> {
                    return new Promise(
                        resolve => {
                            require([], () => {
                                resolve({
                                    css: require('./css/message_box.css'),
                                    template: require('./html/message_box.html'),
                                    controller: require('./js/message_box.js')
                                })
                            })
                        }
                    );
                }
            }
        }
    ).state({
            name: 'home.message.add_message',
            url: '/add_message?isReply&toUid&title',
            params: {isReply: null, toUid: null, title: null},
            templateProvider: ['resources', function (resources) {
                return resources.template
            }],
            controllerProvider: ['resources', (resources)=> {
                return resources.controller
            }],
            onEnter: ['resources', (resources)=>resources.css.use()],
            onExit: ['resources', (resources)=>resources.css.unuse()],
            resolve: {
                resources: ()=> {
                    return new Promise(
                        resolve => {
                            require(['./js/message.js'], () => {
                                resolve({
                                    css: require('./css/add_message.css'),
                                    template: require('./html/add_message.html'),
                                    controller: require('./js/add_message.js')
                                })
                            })
                        }
                    );
                }
            }
        }
    )
}])

这个是路由状况的一个声明文件,name,url,param字段的体式格局稳定,关键是看resolve这个部份。依据ui-route的resolve文档,resolve是为了给state或许controller举行自定义注入对象的。

下面是举出文档中关于resolve的例子:

$stateProvider.state('myState', {
      resolve:{

         // Example using function with simple return value.
         // Since it's not a promise, it resolves immediately.
         simpleObj:  function(){
            return {value: 'simple!'};
         },

         // Example using function with returned promise.
         // This is the typical use case of resolve.
         // You need to inject any services that you are
         // using, e.g. $http in this example
         promiseObj:  function($http){
            // $http returns a promise for the url data
            return $http({method: 'GET', url: '/someUrl'});
         },

         // Another promise example. If you need to do some 
         // processing of the result, use .then, and your 
         // promise is chained in for free. This is another
         // typical use case of resolve.
         promiseObj2:  function($http){
            return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return doSomeStuffFirst(data);
               });
         },        

         // Example using a service by name as string.
         // This would look for a 'translations' service
         // within the module and return it.
         // Note: The service could return a promise and
         // it would work just like the example above
         translations: "translations",

         // Example showing injection of service into
         // resolve function. Service then returns a
         // promise. Tip: Inject $stateParams to get
         // access to url parameters.
         translations2: function(translations, $stateParams){
             // Assume that getLang is a service method
             // that uses $http to fetch some translations.
             // Also assume our url was "/:lang/home".
             return translations.getLang($stateParams.lang);
         },

         // Example showing returning of custom made promise
         greeting: function($q, $timeout){
             var deferred = $q.defer();
             $timeout(function() {
                 deferred.resolve('Hello!');
             }, 1000);
             return deferred.promise;
         }
      },

      // The controller waits for every one of the above items to be
      // completely resolved before instantiation. For example, the
      // controller will not instantiate until promiseObj's promise has 
      // been resolved. Then those objects are injected into the controller
      // and available for use.  
      controller: function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){
          $scope.simple = simpleObj.value;

          // You can be sure that promiseObj is ready to use!
          $scope.items = promiseObj.data.items;
          $scope.items = promiseObj2.items;

          $scope.title = translations.getLang("english").title;
          $scope.title = translations2.title;

          $scope.greeting = greeting;
      }
   })

我们能够看到resolve的对象是支撑Promise的。

再回到我们之前的代码templateProvidercontrollerProvider我们注入了resources的模板对象和controller对象,onEnteronExit注入了css模块。

假如controller中依靠了效劳怎么办的?

resolve: {
    resources: ()=> {
        return new Promise(
            resolve => {
                require(['./js/message.js'], () => {
                    resolve({
                        css: require('./css/add_message.css'),
                        template: require('./html/add_message.html'),
                        controller: require('./js/add_message.js')
                    })
                })
            }
        );
    }
}

能够在require内里将效劳注入,如代码中的message.js。而为了将效劳举行异步加载我们不能用一般的.factory或许.service。而须要挪用$provide.factory或许$provide.service

假如采纳webpack举行编译打包的话就须要webpack.optimize.CommonsChunkPlugin的支撑,如许能够对js举行拆分打包,到达异步加载js的目标。

    原文作者:chenatu
    原文地址: https://segmentfault.com/a/1190000007396713
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞