Angular-Ui-Router+ocLazyLoad dynamic loading script example

Before using angular, colleagues adopted a one-time loading method, loading all js and css at one time on the index page. This loading method is only suitable for teaching and small projects. It is not recommended to use it in medium and large projects, as the loading speed affects the user experience.

After using Ui-Router, my first idea is to componentize each function, and then load the page js and css when requesting the view. The index page mainly loads the required files:

So I tried it and wrote it like this, but I found that an angular error was reported because the controller did not inject the main program.

Later, I found ocLazyLoad in the angular library. This is a script loader tailored for angular, which is only 15K.

It's easy to use:

Load files in turn

<script src="framework/angular/"></script> 
<script src="framework/"></script> 
<script src="framework/"></script> 
<script src="framework/"></script> 

Just like writing routes normally, you only need to have an extra layer of resolution.

The route will execute resolve objects before rendering, such as loading js and css, and of course there are other uses.

Code: (Don't worry about the script loading repeatedly, the scripts loaded before will be cached in the browser)

('myRouters', ['','']) 

.state('index', { 
  url: '/index', 
  title: ' | ！', 
  views: { 
    'A': { 
      templateUrl: 'components/header/', 
      controller: 'headerCtrl' 
    }, 
    'C@index': { 
      templateUrl: 'components/header/', 
      controller: 'H2Ctrl' 
    } 
  }, 
  resolve: { 
    loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { 
      return $(['components/header/', 
        'components/header/', 
        'components/header/', 
        'components/header/']); 
    }] 
  } 
}) 

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.