UI-router、解析$http未按文档工作

ui-router, resolve, $http not working as documented

本文关键字：文档 工作 http 解析 UI-router      更新时间：2023-09-26

我在ui-router，resolve，factory和$http.get调用方面有错误(或者可能是错误的用法？(。

下面是配置部分中的代码片段：

$stateProvider
    .state('index', {
        url: '/',
        views: {
            '': {
                templateUrl: './views/layout.html',
                controller: 'MyAppCtrl'
            },
            'app-navbar@index': {
                templateUrl: './views/app-navbar.html'
            },
            'app-accordion@index': {
                templateUrl: './views/app-accordion.html',
                controller: 'AppController',
                resolve: {
                    appPromiseObj: function (AppFactory) {
                        return AppFactory.getApps();
                    }
                }
            },
...

并具有以下应用工厂

myApp.factory('AppFactory', function ($http) {
    var appFac = {
        apps: []
    };
    appFac.getApps = function () {
        promiseObj = $http
           .get('http://localhost:4567/applications')
           .success(function (data) {
             console.log("success calling http");
             angular.copy(data, appFac.apps);
        });
        return promiseObj;
    };
    return appFac;
});

但是当我运行应用程序时，"成功"回调中的控制台.log消息永远不会被执行。浏览器控制台日志显示 http 调用执行正常，代码为 200。我假设这意味着角度认为它失败了，还是我应该做其他事情？

我什至尝试返回 $q promise 对象(如其他有点相关的堆栈溢出线程中所建议的那样(，但没有成功。在工厂代码中，如果我使用测试数据(即没有 HTTP 调用(，即使我不返回 promise 对象，一切也正常。关于问题可能在哪里的任何指针？感谢任何帮助我调试的指针...

我在这里创建了工作 plunker。问题是AppFactory.getApps()内部的承诺处理不正确。我们需要在开始时返回承诺，然后在成功时返回一些调整后的东西。现在它工作了...

这是我所做的主要更改：

// INSTEAD of this
// appFac.getApps1 = function () {
//     promiseObj = $http.get('http://localhost:4567/applications')
//       .success(function (data) {
//        console.log("success calling http");
//        angular.copy(data, appFac.apps);
//     });
//     
//     return promiseObj;

// Let's use this
appFac.getApps = function () {
    return $http
      .get('http://localhost:4567/applications')
      .success(function (data) {
       console.log("success calling http");
       angular.copy(data, appFac.apps);
       return appFac.apps
    });
    // this is already returned above
    //return promiseObj;

在此处检查其运行情况

扩展

基于您的扩展弹道机(仍然没有按预期完全工作(

-http://plnkr.co/edit/c89j3eFvYyguMt0QznAI?p=preview

我创建了附加和工作版本

  • http://plnkr.co/edit/f2aucPcbtzqwIEogbjuJ?p=preview

唯一的更改是正确的命名(例如.app.js作为脚本而不是脚本加载.js...但最后，承诺现在已经解决了，这个 json：

[{"id":10566982,"networkID":34256899,"appID":56114114
  ,"name":"10566982name","description"
   ...
]

被加载并转换为手风琴：

  • 56114114名称
  • 58616695名称

最后在下面的评论中回答您的问题：

但是承诺Obj = $http(...(有什么区别... ;返回承诺 Obj 并返回$http (...(; ?

没有区别(除了我看到我的方法更清楚一点(。真正的区别是：

angular.copy(data, appFac.apps);

与

return appFac.apps

作为.success()方法的最终陈述。它必须返回一些东西。塔的诀窍

相关文章：