Load ui-router states dynamically

Question

After a successful login to my app I want to dynamically load all states available to the user from api/js. The dynamically loaded states will always include an abstract state app.module which is the only known state and which is root to all other states in the same download.

My first approach was to use oc.lazyLoad after login. It worked fine, but not when refreshing the browser. I then tried to load using oc.lazyLoad in a module.run, but it didn't work.

I've been trying to use oc.lazyLoad together with futureState from ui-router extras but I can't get it to work.

I need some help with how to configure $futureStateProvider, if it's even possible to do what I want.

You need to investigate ocLazyLoad further because you can do what you want. For example in your run block: $ocLazyLoad.load({type: 'js', path: 'js/libs/fastclick.min.js'}).then(function(){FastClick.attach(document.body);}) — user3791775, Jun 11 '16 at 00:37

Vu Quyet · Answer 1 · 2016-06-10T23:59:49.137

2

Dont need lazy load.

For adding dynamic states. I just need add state provider reference to my app at config phase.

angular.module('app.module').config(function ($stateProvider, $urlRouterProvider) {
        angular.module('app.module').$stateProvider = $stateProvider;        
        //send to login first
        $urlRouterProvider.otherwise("/user/login");      
});

then in login service after user login success, add some news states to states provider.

loginSuccess(){
   $http.get('api/states/').then(function(states){
     bindStates(states);
   });
}

function bindStates(states) {
    states.forEach(function bind(stateData) {
        // add new states
        angular.module('app.module').$stateProvider.state({
            name: stateData.name,
            url: stateData.url,
            template: stateData.template,
            params: {
                'pageId': null
            },
            abstract: stateData.abstract
        });
    });

    // go to default state
    $state.go('main');
}

edited Jun 10 '16 at 23:59

answered Jun 10 '16 at 16:11

Vu Quyet

1,675
1
16
22

In my case, the downloaded scripts are not json objects but strings with javascript code. – Peter Hedberg Jun 10 '16 at 16:22
When refresh browser, go back to login page, check in localStorage/cookies to know that user is authorized. Pass login and call loginSuccess again. If you want to know state user are in before refresh, keep it in localStorage with $routeChangeSuccess – Vu Quyet Jun 10 '16 at 16:25
"downloaded scripts is string" can be parsed to json with stringify and evel methods but why it is not json to make it simple? – Vu Quyet Jun 10 '16 at 16:28
I don't use $urlRouterProvider.otherwise to send to login, but to a not found page instead. But the refresh solution could work as a workaround. – Peter Hedberg Jun 10 '16 at 17:39
It is script strings and it's not something I can change right now. It's a bundle of multiple js files containing angular modules with states, directive, services and whatever. – Peter Hedberg Jun 10 '16 at 17:41

Load ui-router states dynamically

1 Answers1