How to implement js lazy loading using ocLazyLoad?

ocLazyLoad description

1.ocLazyLoad is a third-party library of AngularJS, which can realize dynamic loading/on-demand loading of modules, controllers and other dependencies

2 .$ocLazyLoad.load() supports multiple files, you can customize the specified file type, and you can customize whether to cache it on the client

3. There is a problem, $ocLazyLoad.load() returns dynamic type $ $state, for the js file that does not exist or fails to load, there is no relevant processing API

. Recently, I encountered a problem when developing a system. I used angular to route an html fragment. This fragment needs to use a js plug-in to implement a Rich text editor. The key problem is that it must be bound to the dom element through js after the fragment is loaded. At first, I thought it would be OK to write the JS code directly in the code snippet. However, after experiments, when the routing inserts the HTML fragment into the page, it can only read the CSS and cannot parse and execute the JS code.

After google for a long time, I found a lot of angular+requireJs solutions, but I think it is not suitable for my scenario, because requirejs is essentially a module loader, and on-demand loading is just his side job. We use it It should be mainly used for modularization. If we use modular syntax to wrap our code (define) simply for on-demand loading, it feels a bit like using a cannon to kill mosquitoes. For my needs, the cost is huge.

Finally decided to use ocLazyLoad to handle it, because the advantage of this solution is that it is simple, easy to implement and non-intrusive. At the same time, this solution has some shortcomings. For example, each dynamic loading of required scripts and template resources will cause a lot of unnecessary network overhead, and the routing definition is relatively complicated (with some additional configuration items, it is actually not complicated, but cumbersome). For large and complex There are many business applications and routes, and the energy consumed cannot be ignored. But it’s just right for my situation. So I forked js on github and introduced it into the project.

 <script src="js/ocLazyLoad.js?1.1.11"></script>

Configure it in the angular module that needs to be used

var app = angular.module('formCtrlParts', ['oc.lazyLoad']);

Then use this service in the controller that needs to be used for routing. On-demand loading of js files

##

app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){
    $ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');
   
})

This is basically done, ocLazyLoad has many loading methods, and Can be loaded with routing and instructions.　　

The above is the detailed content of How to implement js lazy loading using ocLazyLoad?. For more information, please follow other related articles on the PHP Chinese website!