Example of loading ocLazyLoad on demand in AngularJS, angularjsoclazyload

Example of loading ocLazyLoad on demand in AngularJS, angularjsoclazyload

I. Preface

OcLoayLoad is an on-demand module loader of AngularJS. Generally, in a small project, it is no big problem to download all the resources when loading the page for the first time. However, as our website grows bigger and bigger, this loading policy slows down the speed of network speed initialization and the user experience is poor. Second, it is easy to work in teams to load sub-modules to reduce code conflicts.

2. On-Demand Loading objects

Various Controller modules, ctictive modules, Server modules, and template templates are actually some. js files or. html files.

III. On-Demand Loading scenarios

1 route loading (resolve/uiRouter)

The resolve Based on uiRouter is a series of operations performed before loading the controller and template. It helps us initialize the view we want to go. The controller will be instantiated only when the action is completed. Therefore, we can load the controller we need in the resolve step.

  $stateProvider    .state('index', {      url: '/',      views: {        'lazyLoadView': {          templateUrl: 'partials/main.html',          controller: 'AppCtrl'        }        },      resolve: {        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){          return $ocLazyLoad.load('js/AppCtrl.js')        }]      }    })

Among them, 'js/AppCtrl. js' contains a controller we need

angular.module('myApp').controller('AppCtrl', ['$scope', function($scope){//...}])

2. Dependency Loading

Import a series of required modules in the dependencies (here there is a layer of '[]' that fits the needs)

angular.module('gridModule', [[  'bower_components/angular-ui-grid/ui-grid.js',  'bower_components/angular-ui-grid/ui-grid.css']]).controller('GridModuleCtrl', ['$scope', function($scope){  //...}])

3 dynamic loading in cotroroller

Angular. module ('myapp '). controller ('apachetrl', ['$ scope', '$ oclazyload', function ($ scope, $ ocLazyLoad) {$ scope. loadBootstrap = function () {$ ocLazyLoad. load (['bower _ components/bootstrap/dist/js/bootstrap. js', 'bower _ components/bootstrap/dist/css/bootstrap.css '])} var unbind = $ scope. $ on ('clazyload. fileLoaded ', function (e, file) {$ scope. bootstrapLoaded = true; console. log ('boot downloaded successfully'); unbind () ;})}])

4. template inclusion and loading (config)

How can we deal with the nested controller in the html template we load? The oc-lazy-load command and $ ocLazyLoadProvider configuration are required.

/*template A.html*/
4. How to organize on-Demand Loading
Routing, distinguishing by function, and packaging into different or single controller. directive. server modules

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.