Tag: angular度ui路由器

到$ routeProvider或$ stateProvider

我一直在寻找一个合理的答案来解决这个困境,以便提供者或不。 看起来好像$ routeProvider即将停止,并用$ stateProviderreplace,不幸的是,我不知道这个语句的准确性,加上stateProvider仍然只能通过ui_router插件使用。 是计划添加stateProvider作为AngularJS核心的一部分? 假设它将很快replace旧的$ routeProvider是否保存? 他们当然不能很好地协作,我在github中find的迁移configuration文件不起作用,缺less文档。

在ui-routerparsing过程中应用加载微调器

resolve $routeProvider属性允许在相应的视图被呈现之前执行一些工作。 如果我想在执行这些作业时显示一个微调框以增加用户体验,该怎么办? 事实上,否则用户会感觉到应用程序被阻塞,因为例如几毫秒没有显示视图元素。 当然,还有一种方法可以从当前视图中定义一个全局的div元素来显示,以显示微调,这要感谢$scope.$rootChangeStart函数。 但是我不想用一个可怜的微调来隐藏整个页面。 我想我的web应用程序的一些页面加载显示的方式不同。 我遇到了这个有趣的post,其中包含我上面描述的确切问题: 这种方法导致了糟糕的UI体验。 用户点击一个button来刷新列表或其他东西,整个屏幕被覆盖在一个通用的微调,因为库无法显示一个微调只是实际上受到状态改变影响的视图。 不用了,谢谢。 无论如何,在我提出这个问题之后,我意识到“解决”function是一种反模式。 它等待所有的决心,然后animation状态的变化。 这是完全错误的 – 你希望你的状态之间的过渡动​​画能够平行于你的数据加载,所以后者可以被前者掩盖。 例如,假设你有一个项目列表,点击其中一个隐藏列表,并在不同的视图中显示项目的细节。 如果我们对项目细节的asynchronous加载平均需要400毫秒,那么我们可以在大多数情况下通过在列表视图上有300毫秒的“离开”animation和300毫秒的“input”animation来掩盖负载在项目详细信息视图。 这样我们就可以为UI提供一个柔和的感觉,并且可以避免在大多数情况下显示一个微调。 但是,这要求我们同时启动asynchronous加载和状态更改animation。 如果我们使用“parsing”,那么整个asynchronousanimation在animation开始之前发生。 用户点击,看到一个微调,然后看到过渡animation。 整个状态变化需要〜1000ms,太慢了。 “解决”可能是caching不同视图之间的依赖关系的一种有用的方法,如果它有select不等待承诺的话,但是当前的行为总是在状态改变开始之前解决它们使得它几乎没有用。 应该避免涉及asynchronous加载的任何依赖性。 我真的应该停止使用resolve来加载一些数据,而是直接开始将它们加载到相应的控制器中? 这样,只要作业执行完毕,我就可以更新相应的视图,而且在视图中我想要的地方,而不是全局。

Angular UI路由器:如何防止访问状态

你好,我是angularJS的新手,并试图阻止访问基于用户标识的某些状态。 这从ui路由器的FAQ描述了我想要做什么,但是我不能让它正常工作。 我需要什么,但在数据对象完全是为了完成这个? (我看到有人在一些博客文章中引用了“真实”,并像我一样使用它,但似乎没有工作,因为我得到一个错误,说明needAdmin没有定义) 这是我的代码: angular.module('courses').config(['$stateProvider', function($stateProvider) { // Courses state routing $stateProvider. state('listCourses', { url: '/courses', templateUrl: 'modules/courses/views/list-courses.client.view.html' }). state('createCourse', { url: '/courses/create', templateUrl: 'modules/courses/views/create-course.client.view.html', data: { needAdmin: true } }). state('viewCourse', { url: '/courses/:courseId', templateUrl: 'modules/courses/views/view-course.client.view.html' }). state('editCourse', { url: '/courses/:courseId/edit', templateUrl: 'modules/courses/views/edit-course.client.view.html', data: { needAdmin: true } }); } ]); angular.module('courses').run(['$rootScope', '$state', […]

UI路由器的条件ui意见?

我无法弄清楚一个合理的方式来解决这个相当微不足道的问题。 我希望访客在访问网站索引和login用户时查看他们的个人资料,每个页面都有自己的模板和控制器。 理想情况下,一个url将有两个状态 ,不知何故,我将能够根据login状态自动更改活动的状态。 这两个视图都有自己的嵌套视图,所以ng-include不能被使用(我假设)。 我对angular度和UI路由器相当陌生,认为我可能忽略了一个简单的解决scheme。 可以用命名的视图和ng-show来完成吗?

Ui-Router $ state.go()不刷新数据

我在我的Angular应用程序中有产品列表状态和产品编辑/添加状态。 产品列表数据被加载到控制器(我不认为我需要解决在状态configuration定义)从ngResource获取数据: function InventoryListCtrl (myResource) { var vm = this; myResource.query(function (data) { vm.products = data; }); } 在编辑控制器上,编辑产品后,我回到列表状态,如下所示: vm.product.$update().$promise; $state.go('productList'); 它不总是加载新数据的列表,它通常在第一次运行时显示旧数据,然后在我第二次更新并手动返回列表状态后,每次更新后开始刷新。 我试过这个,但是也没有工作: vm.product.$update().$promise; $state.go('productList', {}, { reload: true }); 我错过了什么?

如何redirect在ui路由器解决?

我试图在一个UI路由器解决scheme内部redirect,并想知道是否有一种方法来重新路由在路由器parsing器。 目前这不是人们所想的。 resolver(auth, $state){ if(!auth.isLoggedIn()){ $state.go('noLoggedInPath'); } } 如何正确地redirectparsing器? 我的临时黑客是这个,但我不舒服。 resolver(auth, $state, $timeout){ if(!auth.isLoggedIn()){ $timeout(function () { $state.go('noLoggedInPath'); }, 0); } }

AngularJS的ui-router中没有URL的状态参数

我正在使用ui-router在AngularJS应用程序中表示状态。 在这里我想改变状态而不改变URL(基本上“更新详细信息”,但这不应该影响URL)。 我使用<a ui-sref="item.detail({id: item.id})">来显示详细信息,但是这只有在我的$stateProvider指定一个类似url: "/detail-:id" 。 在我看来,目前的状态只是通过URL来定义的。

Angular UI-Router如何创build一个“布局”状态?

给定一个像这样的HTML文件: <html> <header ui-view="header"></header> <div class="main" ui-view></div> <footer ui-view="footer"></footer> </html> 如何创build一个布局状态,填充“标题”模板,页脚与页脚模板,然后允许子状态填充空的UI视图? 我猜想空的ui-view也可以被命名为ui-view =“main”。

如何处理angular-ui-router解决scheme中的错误

我正在使用angular-ui-router的resolve ,在移到状态之前从服务器获取数据。 有时对服务器的请求失败,我需要通知用户有关失败。 如果我从控制器调用服务器,那么我可以把呼叫我的通知服务,在呼叫失败的情况下。 我打电话给服务器resolve因为我希望后代状态等待来自服务器的结果,才开始。 哪里可以捕捉错误的情况下,呼叫服务器失败? (我已阅读文档,但仍不确定如何。此外,我正在寻找一个理由来尝试这个新的片段工具:)。 "use strict"; angular.module('MyApp', ["ui.router"]).config([ "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/item"); $stateProvider .state("list", { url: "/item", template: '<div>{{listvm}}</div>' + '<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' + '<ui-view />', controller: ["$scope", "$state", function($scope, $state){ $scope.listvm = { state: $state.current.name }; }] }) .state("list.detail", { url: "/{id}", template: […]

有angular度的网格dynamic计算网格的高度

我正在使用: https : //github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18 <div ui-grid="gridOptions" style="height:765px"></div> 当我硬编码的价值,如上所示,网格展开,一切按预期工作。 但是,如果我做了以下… $scope.gridStyle = 'height:'+numRows*rowHeight+'px' //(765px); <div ui-grid="gridOptions" style="{{gridStyle}}"></div> 在div和div中打印的高度变宽了,但内容本身只扩大到了大约340px。 留下的空白是空白的,所以不是25行,我只看到8.我必须向下滚动,而在网格中有一个完整的400px。 ui-grid-viewport和ui-grid-canvas都不使用这个空间。 为什么ui-grid-viewport不能使用这个空间?