Lazy-load certain files for routes that don't begin with `addin`

Issue

I have a website build by AngularJS and angular-ui-router. In index.html, I load a lot of .js and .css files.

Now, I realize that a part of these .js and .css files are not necessary for the routes like https://localhost:3000/addin/.... So I want to load them by ocLazyLoad only for routes like https://localhost:3000/xxxxx/... where xxxxx is not addin.

Does anyone how to accomplish that in the code?

Solution

Try

.state('xxxxx', {
    url: '/xxxxx',
    templateUrl: 'xxxxx.html',
    controller: function($ocLazyLoad) {
        $ocLazyLoad.load('xxxxx.module.js');
}

Update

As per what you asked in your comments, you can’t have like not for states. You need to map states explicitly.

One way I can think for creating a state which is not /addin, is to first explicitly map them in $stateProvider and then redirect via some redirect state and then load modules which you want to lazy load.

Redirect states other than addin by doing somthing like this for redirection

Answered By – Shashank Vivek

Answer Checked By – Pedro (AngularFixing Volunteer)