当前位置: 首页 > 面试题库 >

角度运行块-使用UI-Router $ stateProvider解决承诺

薛淮晨
2023-03-14
问题内容

UI-Router比不同AngularngRoute。它支持普通ngRoute用户可以执行的所有操作以及许多其他功能。

我正在将我的Angular应用程序从更改ngRouteUI-Router。但是我不太知道如何以resolve编程的方式注入函数-
我在外部Controller和外部使用的代码config

因此,使用standard AngularngRoute我可以resolve promiseAngular运行块中动态注入我的代码:

app.run(function ($route) {
  var route = $route.routes['/'];
  route.resolve = route.resolve || {};
  route.resolve.getData = function(myService){return myService.getSomeData();};
});

现在,我如何使用类似的方式注入解决承诺UI- Router?我尝试通过$stateProvider以获取对的访问权限,state但这对我来说是失败的。

angular.module('uiRouterSample').run(
  [          '$rootScope', '$state', '$stateProvider'
    function ($rootScope,   $state, $stateProvider) {

      //$stateProvider would fail

问题答案:

您可以用来resolve在加载下一个状态之前为控制器提供数据。要访问已解析的对象,您需要将它们作为依赖项注入到控制器中。

让我们以购物清单应用程序为例。我们将从定义应用程序模块开始,并包括ui.router作为依赖项。

angular.module('myApp', ['ui.router']);

现在,我们要定义特定于我们应用程序购物清单页面的模块。我们将定义一个shoppingList模块,包括该模块的状态,该状态的解析和控制器。

购物清单模块

angular.module('myApp.shoppingList').config(function ($stateProvider) {

    $stateProvider.state('app.shoppingList', {
        url: '/shopping-list',
        templateUrl: 'shopping-list.html',
        controller: 'ShoppingListController',
        resolve: {
            shoppingLists: function (ShoppingListService) {
                return ShoppingListService.getAll();
            }
        }
    });

});

现在,我们可以将已解析的对象作为依赖项注入到控制器中。在上述状态下,我正在将一个对象解析为name
shoppingLists。如果要在控制器中使用此对象,则将其包含为具有相同名称的依赖项。

购物清单控制器

angular.module('myApp.shoppingList').controller('ShoppingListController', function ($scope, shoppingLists) {
    $scope.shoppingLists = shoppingLists;
});

有关更多详细信息,请阅读Angular-UI
Wiki
,其中包括使用resolve的深入指南。



 类似资料:
  • 问题内容: 我尝试使用angular-ui,并尝试注入$ stateProvider: html js(test / appModule.js) 堆栈跟踪 如果我删除带有注释的 $ stateProvider 和 ui.router ,那么一切都会起作用: 那么注入 $ stateProvider 的问题有解决的任何想法吗? PS 我尝试了ui示例,它可以工作,但是我无法弄清楚为什么我的不行。 问

  • 问题内容: 我在Angular UI Grid中有一个项目列表。当我单击一行时,我想转到另一个页面。(换句话说,网格中的每一行都是一个链接。) 我想这肯定是一个非常普遍的愿望,尽管我还没有真正看到过有关如何实现的文档。什么是完成此任务的好方法? 问题答案: 我自己想出了答案。这是我的控制器(ES6): 这是我的行模板(Jade): 另外,这是我的样式表(SCSS)。我认为突出显示光标下的行并使用光

  • 问题内容: 这可能很简单,但是我在文档中找不到任何内容,因此使用谷歌搜索没有帮助。我正在尝试定义一个状态,在该状态下,我需要在服务器上单击以提取所需数据的URL取决于状态URL参数。简而言之,类似于: 上面的方法不起作用。我尝试注入以获取所需的参数,但是没有运气。什么是正确的方法? 问题答案: 您关系密切。如果使用ui-router,请改用。该代码对我有用:

  • 问题内容: 我要兑现一个承诺。关键是我真的想在第一个诺言兑现后立即访问(仍在等待中的)第二个 诺言 。不幸的是,当两个诺言都实现时,我似乎只能获得第二个诺言的解决值。 这是我想到的用例: 该功能显示文件选择器,用户可以在其中从自己的硬盘驱动器或URL中选择文件。它返回一个承诺,该承诺将在用户选择文件后立即兑现。此时,我们可能仍然必须通过网络下载所选文件。因此,我不能将所选文件作为分辨率值。相反,应

  • 本文向大家介绍详解angularjs 关于ui-router分层使用,包括了详解angularjs 关于ui-router分层使用的使用技巧和注意事项,需要的朋友参考一下 最近感觉有很多学angular 的童鞋在路由问题中还不清楚怎么使用。其实我之前也是一直晕晕的不懂怎么用,现在要好得多了。在这里就记录下ui-router使用。 就已目前做的这个项目来介绍下怎么使用吧。Note:最好是按照层次规则

  • 问题内容: 我正在编写一个测试用例,用于使用Protractor在Angular应用程序的页面中添加商店信息,在这里我最初是在计算已经拥有的商店数量,并且在完成测试块后,我希望该数量增加一,因此通过遵循创建承诺的链接来做到这一点如何在量角器中创建和操纵承诺? 我希望测试结束时商店的数量是相同的。count()正在解决一个承诺,并且商店计数的正确值会打印在testPromise()中,但是当我调用t