Angular ui-router 和 ocLazyLoad [英] Angular ui-router and ocLazyLoad

问题描述

场景:

我有一些角度模块，例如:

I have some angular modules like:

angular.module('app', ['app.core', 'app.views']);//不延迟加载

app.views 下的每个模块都使用 RouterUtil 来注册自己的路由，例如:

Each module under app.views uses a RouterUtil to register their own route, like:

$stateProvider.state('state name', {/* 这里的一些配置 */});

这个 RouterUtil 也有一个方法可以访问所有注册状态(用于创建动态菜单).

This RouterUtil also have a method to access all registered states (used to create a dynamic menu).

我正在使用 ocLazyLoad，只是为了加载外部模块.当页面加载时，ocLazyLoad 会向其他带有一些 angular 模块的 js 执行请求，然后将该模块添加到实际的环境中.

And I'm using the ocLazyLoad, just to load an external module. When the page is loading, ocLazyLoad will perform a request to other js with some angular modules, and then add this module to the actual enviroment.

当我转到此外部模块的页面并尝试刷新页面时出现问题:

The problem happens when I go to a page of this external module, and try refresh the page:

发生了什么:

• Angular 启动并注册一些 $states
• ocLazyLoad 启动对外部模块的请求
• ui-routes 尝试解析实际 URL，并意识到此 URL 没有状态并将用户重定向到默认(否则)页面
• ocLazyLoad 完成请求并将所有新模块添加到 angular 环境.此时我们有一个请求 URL 的状态(与刷新前相同)

• Angular starts and register some $states
• ocLazyLoad starts a request for the external module
• ui-routes try parse the actual URL, and realizes that there is no state for this URL and redirect the user to default (otherwise) page
• ocLazyLoad finishs the request and add all new modules to angular enviroment. At this moment we have a state with the requested URL (same of before refresh)

在检查这是否是注册的 URL 之前，我可以让 ui-router 等待 ocLazyLoad 请求吗?

Can I do ui-router wait for the ocLazyLoad request before check if this a registered URL?

推荐答案

你想使用 deferIntercept()，为了延迟 ui-router 观看 URL.

you want to use deferIntercept(), in order to delay ui-router from watching the URL.

app.config(function($urlRouterProvider) {
  urlRouterProvider.deferIntercept(); 
});

... ocLazyLoad stuff

app.run(function($urlRouter) { 
  ocLazyLoadPromise.then(function() { urlRouter.listen(); }); 
});

http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouterProvider

http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouterProvider

这篇关于Angular ui-router 和 ocLazyLoad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！