Angular-ui-router + oclazyload + Requirejs Implement resource lazy loading with route

This article mainly explains how to realize lazyload in developing Web application with Angularjs, using ANGULARJS to implement the routing function in the front-end, this paper introduces the lazy loading of the front-end resource using this point.

Problem

At present, most ANGULARJS applications use REQUIRJS to organize modules, but many do not use the Lazyload function, in the App.js start when the full dependency load, in the module function less, front-end resources are not a problem. So the question is, what happens when you rely on too many resources?

1. Build using Grunt-contrib-requirejs to extract the merged files, reduce the HTTP request, but there is a problem: After the build file large, online debugging inconvenient, especially after html2js problem more obvious.
2. As far as possible in the original file in the development of new business additions, no additional pressure on the HTTP request, but there is a problem: many people need to deal with code conflicts frequently; a single file (control,directive, etc.) is large, looking dazzling and prone to problems.

Solve the problem

basic idea: load the required resources when routing switches.
Tools: Angular-ui-router,oclazyload,requirejs.

• configuration Oclazyload
  Configures the primary parameter entry after the introduction of the Oclazyload file

   App. config ([' $ocLazyLoadProvider ',   ($ocLazyLoadProvider) {$ocLazyLoadProvider. config ({loadedm Odules: [ ' Monitorapp '], Jsloader:requirejs, //  use Requirejs to load files  files: [' modules/summary ', ' modules/appengine ', ' modules/alarm ', ' modules/database '], 
         
          //
           main module needs resources, here the main submodule declaration file  debug: true<   /span>}); }]);

   

• Configure Ui-route
  Use Angularjs-ui-route to configure basic rules for routing jumps and to lazy load files

  App. Config ([' $stateProvider ', ' $urlRouterProvider ',function($stateProvider, $urlRouterProvider) {varlazydeferred; /** * Call when routing switch * @param param.file lazy Load File array * @param TPL sub-module View View * @param module submodule name */        functionRESOVLEDEP (param,tpl,module) {varresolves ={loadmyctrl: [' $ocLazyLoad ', ' $templateCache ', ' $q ',function($ocLazyLoad, $templateCache, $q) {lazydeferred=$q. Defer (); return$ocLazyLoad. Load ({name:module, cache:false, Files:param.files}). Then (function() {lazydeferred.resolve ($templateCache. Get (TPL));                });            }]            }; returnresolves;        }; $urlRouterProvider. Otherwise ('/summary '); //Routing Configuration$stateProvider. State (' Module1 ', {URL:'/module1 ', Templateprovider:function() {returnlazydeferred.promise;}, Controller:' Module1controller ', RESOLVE:RESOVLEDEP ({files:[' Controllers/module1ctrl ',                    ' Services/module1service ',                    ' Directives/module1directive '                ]}, ' views/module1.html ', ' app.module1 ')}). State (' Module2 ', {abstract:true, URL:'/module2 ', Templateurl:' Views/module2.html '}). State (' Module2.list ', {URL:‘‘, Templateprovider:function() {returnlazydeferred.promise;}, Controller:' Module2controller ', RESOLVE:RESOVLEDEP ({files:[' Controllers/module2listctrl ',                    ' Services/module2service '                ]}, ' views/list.html ', ' app.module1 ')}). State (' Module1.detail ', {URL:'/:id ', Templateprovider:function() {returnlazydeferred.promise;}, Controller:' Detailcontroller ', RESOLVE:RESOVLEDEP ({files:[' Controllers/detailctrl ',                     ' Services/detailservice '                ]}, ' views/detail.html ', ' app.module2 ')            }); }]);

End

OK, at this point can be in the routing switch convenient loading sub-modules and dependent resources, oclazyload and ui-router There are many can be mined, you can refer to the API to meet the needs.
PS: When initially used with Angular-route+oclazyload, it appears:

multiple directives asking for isolated scope on

multiple asking for template

And so on, not good, recommended to use Ui-route, more powerful.

Angular-ui-router + oclazyload + Requirejs Implement resource lazy loading with route