【问题标题】:Load ui-router states dynamically动态加载 ui-router 状态
【发布时间】:2016-06-11 07:59:49
【问题描述】:

成功登录我的应用程序后,我想从api/js 动态加载用户可用的所有状态。动态加载的状态将始终包含一个抽象状态app.module,这是唯一已知的状态,并且是同一下载中所有其他状态的根。

我的第一种方法是在登录后使用 oc.lazyLoad。它工作正常,但刷新浏览器时不行。然后我尝试在 module.run 中使用 oc.lazyLoad 加载,但没有成功。

我一直在尝试将 oc.lazyLoad 与来自 ui-router extras 的 futureState 一起使用,但我无法让它工作。

我需要一些关于如何配置 $futureStateProvider 的帮助,如果它甚至可以做我想做的事。

【问题讨论】:

  • 您需要进一步调查 ocLazyLoad,因为您可以为所欲为。例如在你的运行块中: $ocLazyLoad.load({type: 'js', path: 'js/libs/fastclick.min.js'}).then(function(){FastClick.attach(document.body); })

标签: angularjs angular-ui-router angular-ui-router-extras oclazyload


【解决方案1】:

不需要延迟加载。

用于添加动态状态。我只需要在配置阶段为我的应用添加状态提供程序引用。

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');
}

【讨论】:

  • 就我而言,下载的脚本不是 json 对象,而是带有 javascript 代码的字符串。
  • 刷新浏览器时,返回登录页面,在localStorage/cookies中查看用户是否被授权。通过登录并再次调用 loginSuccess。如果您想知道用户在刷新前处于何种状态,请使用 $routeChangeSuccess 将其保存在 localStorage 中
  • "downloaded scripts is string" 可以用stringify和evel方法解析成json,但是为什么不是json来简化呢?
  • 我不使用 $urlRouterProvider.otherwise 发送到登录,而是发送到未找到的页面。但是刷新解决方案可以作为一种解决方法。
  • 这是脚本字符串,我现在无法更改。它是一个包含多个 js 文件的捆绑包,其中包含具有状态、指令、服务等的角度模块。
猜你喜欢
  • 1970-01-01
  • 2016-12-10
  • 1970-01-01
  • 2014-05-03
  • 1970-01-01
  • 2016-02-08
  • 1970-01-01
  • 2017-08-18
  • 2015-11-10
相关资源
最近更新 更多