Динамически загружать состояния пользовательского интерфейса

После успешного входа в мое приложение я хочу динамически загружать все состояния, доступные пользователю из api/js. Динамически загружаемые состояния всегда будут включать абстрактное состояние app.module, которое является единственным известным состоянием и является корневым для всех других состояний в той же загрузке.

Мой первый подход состоял в том, чтобы использовать oc.lazyLoad после входа в систему. Он работал нормально, но не при обновлении браузера. Затем я попытался загрузить с помощью oc.lazyLoad в module.run, но это не сработало.

Я пытался использовать oc.lazyLoad вместе с futureState из дополнений ui-router, но не могу заставить его работать.

Мне нужна помощь в настройке $futureStateProvider, если вообще возможно сделать то, что я хочу.


angularjs angular-ui-router angular-ui-router-extras oclazyload
person Peter Hedberg    schedule 10.06.2016    source источник
comment
Вам нужно дополнительно изучить ocLazyLoad, потому что вы можете делать то, что хотите. Например, в блоке выполнения: $ocLazyLoad.load({type: 'js', path: 'js/libs/fastclick.min.js'}).then(function(){FastClick.attach(document.body); })   -  person user3791775    schedule 11.06.2016

Ответы (1)


arrow_upward
2
arrow_downward

Не нужна ленивая загрузка.

Для добавления динамических состояний. Мне просто нужно добавить ссылку на поставщика состояния в мое приложение на этапе настройки.

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

затем в службе входа в систему после успешного входа пользователя добавьте некоторые состояния новостей в поставщик состояний.

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');
}
person Vu Quyet    schedule 10.06.2016
comment
В моем случае загруженные скрипты представляют собой не объекты json, а строки с кодом javascript. - person Peter Hedberg; 10.06.2016
comment
Когда обновите браузер, вернитесь на страницу входа, проверьте localStorage/cookies, чтобы знать, что пользователь авторизован. Передайте логин и снова вызовите loginSuccess. Если вы хотите узнать состояние пользователя перед обновлением, сохраните его в локальном хранилище с помощью $routeChangeSuccess. - person Vu Quyet; 10.06.2016
comment
загруженные скрипты - это строка, которую можно преобразовать в json с помощью методов stringify и evel, но почему это не json, чтобы сделать ее простой? - person Vu Quyet; 10.06.2016
comment
Я не использую $urlRouterProvider.иначе для отправки на вход в систему, а вместо этого на ненайденную страницу. Но решение для обновления может работать как обходной путь. - person Peter Hedberg; 10.06.2016
comment
Это строки сценария, и я не могу изменить их прямо сейчас. Это набор из нескольких js-файлов, содержащих угловые модули с состояниями, директивами, службами и всем остальным. - person Peter Hedberg; 10.06.2016