我如何在“解决"方案内部使用工厂的$ stateProvider? [英] How can I use a factory inside a "resolve" of $stateProvider?

问题描述

作为标题，我想使用工厂坚持解决" app.js:

As title I want to use a factory insisde a "resolve" app.js:

    angular
    .module("goHenry", ["ui.router"])
    .factory("httpPost", httpPost)
    .controller("MainCTRL", ["$scope", MainCTRL]);

function MainCTRL($scope, httpPost){
    this.nameApp = "CiaoMiao";
    console.log($scope.children, httpPost);
}

function httpPost($http, $q){
    return {
        get: function() {
             var deferred = $q.defer();
             $http.post.apply(null, arguments)
                       .success(deferred.resolve)
                       .error(deferred.resolve);
         return deferred.promise;
        }
    }//RETURN
}

routers.js:

routers.js:

    var httpConfig = {headers:{ "Content-Type" : "application/x-www-form-urlencoded" }};

    var config = ["$urlRouterProvider", "$stateProvider", function($urlRouterProvider, $stateProvider){

        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state("multi",{
                url: "/multi",
                    "viewA@multi": {
                        templateUrl: "app/templates/login.htm",
                        controller: ["$scope", "getChildrenNumber", function($scope, getChildrenNumber){
                            this.nameApp = "nameAppChanged";
                            this.gatto = "Miao";
                        }],
                        controllerAs: "ctrl"
                    }
                },
                resolve: {
                    getChildrenNumber: ["$http", function($http, httpPost){
                        var httpP = httpPost.get("http://domain.com/user/login/api-login", $.param({ username:"[e-mail]", password:"ciaociA0" }), httpConfig)
                        console.log(httpP);
                        return "Some response from an API";
                    }]
                }
            });
angular
    .module("CiaoMiao")
    .config(config);

作为console.log的结果，我得到了未定义"，在代码的这一部分，我不知道如何注入该工厂. 我试图放入该视图的主控制器中，但效果不佳.

As result of console.log I got "undefined", I don't get how to inject that factory at this part of the code. I tried to put into the main controller of that view, but it didn't work as well.

推荐答案

(如果将解决方案放在您的视图中，它将可以使用. 如果需要在同一状态的多个视图中进行解析.我会尝试使用抽象状态并在其中添加解析.)可以运行，但不是必需的(请参见下面的编辑.)

(If you place the resolve at your view it should work. If you need that resolve in multiple views of the same state. I would try to use an abstract state and add the resolve there.) Works but is not needed (see edit below.)

请查看以下 jsfiddle 或以下示例.

Please have a look at this jsfiddle or the demo below.

为了使内容更易于阅读，我对演示进行了一些简化.也没有在演示中为DI添加数组符号. 您无需在工厂中使用延迟的对象，因为$http已经返回了诺言.

I've reduced the demo a bit to keep things easier to read. Also not added array notation for DI in the demo. You don't need to use the deferred object in your factory because $http is already returning a promise.

您可以将解决方案放置在视图之外，它也应该起作用.我已经在小提琴中进行了尝试. 因此，您的代码中可能存在另一个问题.

You can place the resolve outside of the view and it should work too. I've tried it in this fiddle. So there's probably a different issue in your code.

好的，我认为您的代码存在的问题是您没有从诺言中返回已解决的价值.类似于promise.then(function(response) {return response;});

OK, I think the problem with your code is that you're not returning the resolved value from your promise. Something like promise.then(function(response) {return response;});

angular.module('demoApp', ['ui.router'])
    .factory('myDataFactory', function ($http) {
    return {
        get: function (id) {
            return $http.post('http://crossorigin.me/http://www.mocky.io/v2/55a65562b2016ce10c7e6ea9', {
                id: id
            }).then(function (response) {
                return response;
            });
        }
    };
})
    .config(function ($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/124');

    $stateProvider.state('home', {
        url: '/:id',
        views: {
            'viewA': {
                template: '{{hello}}',
                controller: 'homeController',
                resolve: {
                    backendData: function (myDataFactory, $stateParams) {
                        return myDataFactory.get($stateParams.id);
                    }
                }
            },
            '@': {
                template: 'main view'
            }
        }

    });
})
    .controller('homeController', function ($scope, backendData) {
    console.log(backendData);
    $scope.hello = backendData;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="demoApp">
    <div ui-view=""></div>
    <div ui-view="viewA"></div>
</div>

这篇关于我如何在“解决"方案内部使用工厂的$ stateProvider?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！