个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
$routeProvider 的
resolve 属性允许在渲染相应 View 之前执行一些作业。
如果我想在执行这些作业时显示微调器以提高用户体验，该怎么办？
事实上，否则用户会感觉应用程序已被阻止，因为在某些毫秒 > 600 毫秒内没有显示任何 View 元素。
当然，有一种方法可以定义一个全局 div 元素在当前 View 之外来显示，以便显示微调器，这要归功于 $ scope.$rootChangeStart 函数。
但我不想隐藏整个页面，而中间只有一个糟糕的旋转器。
我希望我的网络应用程序的某些页面在加载显示方式方面有所不同。
我发现 this interesting post 包含我上面描述的确切问题:
That approach results in a horrible UI experience. The user clicks on a button to refresh a list or something, and the entire screen gets blanketed in a generic spinner because the library has no way of showing a spinner just for the view(s) that are actually affected by the state change. No thanks.
In any case, after I filed this issue, I realised that the "resolve" feature is an anti-pattern. It waits for all the promises to resolve then animates the state change. This is completely wrong - you want your transition animations between states to run parallel to your data loads, so that the latter can be covered up by the former.
For example, imagine your have a list of items, and clicking on one of them hides the list and shows the item's details in a different view. If we have an async load for the item details that takes, on average, 400ms, then we can cover up the load almost entirely in most cases by having a 300ms "leave" animation on the list view, and a 300ms "enter" animation on the item details view. That way we provide a slicker feel to the UI and can avoid showing a spinner at all in most cases.
However, this requires that we initiate the async load and the state change animation at the same moment. If we use "resolve", then the entire async animation happens before the animation starts. The user clicks, sees a spinner, then sees the transition animation. The whole state change will take ~1000ms, which is too slow.
"Resolve" could be a useful way to cache dependencies between different views if it had the option not to wait on promises, but the current behaviour, of always resolving them before the state change starts makes it almost useless, IMO. It should be avoided for any dependencies that involve async loads.
我真的应该停止使用 resolve 加载一些数据，而是开始直接将它们加载到相应的 Controller 中吗？这样我只要执行作业并且在 View 中我想要的位置就可以更新相应的 View ，而不是全局。
最佳答案
您可以使用监听 $routeChangeStart 的指令，例如在元素触发时显示该元素:
app.directive('showDuringResolve', function($rootScope) {
return {
link: function(scope, element) {
element.addClass('ng-hide');
var unregister = $rootScope.$on('$routeChangeStart', function() {
element.removeClass('ng-hide');
});
scope.$on('$destroy', unregister);
}
};
});
然后将其放置在特定 View 的加载器上，例如:
查看1:
<div show-during-resolve class="alert alert-info">
<strong>Loading.</strong>
Please hold.
</div>
查看2:
<span show-during-resolve class="glyphicon glyphicon-refresh"></span>
此解决方案(以及与此相关的许多其他解决方案)的问题是，如果您从外部站点浏览到其中一个路由，则不会加载以前的 ng-view 模板，因此您的页面在执行期间可能只是空白解决。
这可以通过创建一个充当后备加载程序的指令来解决。它将监听 $routeChangeStart 并仅在没有之前的路由时才显示加载程序。
一个基本示例:
app.directive('resolveLoader', function($rootScope, $timeout) {
return {
restrict: 'E',
replace: true,
template: '<div class="alert alert-success ng-hide"><strong>Welcome!</strong> Content is loading, please hold.</div>',
link: function(scope, element) {
$rootScope.$on('$routeChangeStart', function(event, currentRoute, previousRoute) {
if (previousRoute) return;
$timeout(function() {
element.removeClass('ng-hide');
});
});
$rootScope.$on('$routeChangeSuccess', function() {
element.addClass('ng-hide');
});
}
};
});
后备加载器将被放置在带有 ng-view 的元素外部:
<body>
<resolve-loader></resolve-loader>
<div ng-view class="fadein"></div>
</body>
关于angularjs - 在 ui-router 解析期间应用加载微调器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24200909/
24
4
0
我想要显示正在加载的 .gif，直到所有内容都已加载，包括嵌入的 iframe。但是，目前加载 gif 会在除 iframe 之外的所有内容都已加载后消失。我怎样才能让它等到 iframe 也加载完毕
首先，这是我第一次接触 Angular。 我想要实现的是，我有一个通知列表，我必须以某种方式限制 limitTo，因此元素被限制为三个，在我单击按钮后，其余的应该加载。 我不明白该怎么做: 设置“ V
我正在尝试在我的设备上运行这个非常简单的应用程序(使用 map API V2)，并且出于某种原因尝试使用 MapView 时: 使用 java 文件: public class MainMap e
我正在使用 Python 2.6、Excel 2007 Professional 和最新版本的 PyXLL。在 PyXLL 中加载具有 import scipy 抛出异常，模块未加载。有没有人能够在
我想做这个: 创建并打包原始游戏。然后我想根据原始游戏中的蓝图创建具有新网格/声音/动画和蓝图的其他 PAK 文件。原始游戏不应该知道有关其他网格/动画/等的任何信息。因此，我需要在原始游戏中使用 A
**摘要：**在java项目中经常会使用到配置文件，这里就介绍几种加载配置文件的方法。 本文分享自华为云社区《【Java】读取/加载 properties配置文件的几种方法》，作者：Copy工程师。
在 Groovy 脚本中是否可以执行条件导入语句？ if (test){ import this.package.class } else { import that.package.
我正在使用 NVidia 视觉分析器(来自 CUDA 5.0 beta 版本的基于 eclipse 的版本)和 Fermi 板，我不了解其中两个性能指标: 全局加载/存储效率表示实际内存事务数与请求事
有没有办法在通过 routeProvider 加载特定 View 时清除 Angular JS 存储的历史记录？ ? 我正在使用 Angular 创建一个公共(public)安装，并且历史会积累很多，
使用 Xcode 4.2，在我的应用程序中， View 加载由 segue 事件触发。 在 View Controller 中首先调用什么方法？ -(void) viewWillAppear:(BOO
我在某些Django模型中使用JSONField，并希望将此数据从Oracle迁移到Postgres。 到目前为止，当使用Django的dumpdata和loaddata命令时，我仍然没有运气来保持J
创建 Nib 时，我需要创建两种类型:WindowNib 或 ViewNib。我看到的区别是，窗口 Nib 有一个窗口和一个 View 。 如何将 View Nib 加载到另一个窗口中？我是否必须创建
我想将多个env.variables转换为静态结构。 我可以手动进行: Env { is_development: env::var("IS_DEVELOPMENT")
正如我从一个测试用例中看到的:https://godbolt.org/z/K477q1 生成的程序集加载/存储原子松弛与普通变量相同:ldr 和 str 那么，宽松的原子变量和普通变量之间有什么区别吗
我有一个重定向到外部网站的按钮/链接，但是外部网站需要一些时间来加载。所以我想添加一个加载屏幕，以便外部页面在显示之前完全加载。我无法控制外部网站，并且外部网站具有同源策略，因此我无法在 iFrame
我正在尝试为我的应用程序开发一个Dockerfile，该文件在初始化后加载大量环境变量。不知何故，当我稍后执行以下命令时，这些变量是不可用的: docker exec -it container_na
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我刚刚遇到一个问题，我有一个带有一些不同选项的选择标签。 现在我想检查用户选择了哪些选项。 然后我想将一个新的 html 文件加载到该网站(取决于用户选中的选项)宽度 javascript，我该怎么做
我知道两种保存/加载应用程序设置的方法: 使用PersistentStore 使用文件系统(存储，因为 SDCard 是可选的) 我想知道您使用应用程序设置的做法是什么？ 使用 PersistentS
我开始使用 Vulkan 时偶然发现了我的第一个问题。尝试创建调试报告回调时(验证层和调试扩展在我的英特尔 hd vulkan 驱动程序上可用，至少它是这么说的)，它没有告诉我 vkCreateDeb
我是一名优秀的程序员,十分优秀！