在角JS利用工厂和HTTP [英] Using factory and http in Angular JS

问题描述

我刚开始接触的角度，看到你可以定义一个工厂在多个控制器使用。

我有低于code，这是我返回的结果中成功的方法很好。但是，并非外界的功能。

我有一种感觉，它做异步，但我也不太清楚如何与它往前走，如果它是。

任何帮助将是AP preciated，所以在先进的感谢。

  VAR abyssApp = angular.module（'abyssApp'，[]）;abyssApp.factory（'abyssData'，函数（$ HTTP）{
    VAR的结果，
        产品= $ http.get（'HTTP：//abyss.local/products.php'）;    products.success（功能（数据）{
        结果= angular.fromJson（数据）;
        的console.log（'成功：'结果）; //用数据对象
    }）;    的console.log（结果）; //未定义
}）;abyssApp.controller（'ItemListCtrl'，函数（$范围，abyssData）{
    $ scope.items = abyssData;
    的console.log（'abyssData：'，abyssData）; //未定义
}）;
 

解决方案

下面是一些编辑。请注意，我这样做没有真正检查，所以typeos和错误是完全可能的，但它的精神应该是有意义的。

  VAR abyssApp = angular.module（'abyssApp'，[]）;abyssApp.service（'abyssData'，函数（$ HTTP）{
    this.products = $ http.get（'HTTP：//abyss.local/products.php'）;
}）;abyssApp.controller（'ItemListCtrl'，函数（$范围，abyssData）{
    abyssData.products.then（功能（数据）{
        的console.log（数据）;
        $ scope.items =数据;
    }）赶上（功能（错误）{执行console.log（ERR）;}）;
}）;
 

我做了一个服务，而不是一个工厂，因为你真的只需要一个服务（单身）那里。如果有你会调用不同的URL，并希望做类似产品=新abyssData（'土豆'）或事物的工厂将是适当的。

一般而言，$ HTTP返回诺的对象，这本身是不是你需要的数据，而是将的决心的你所需要的数据。这个承诺模式重复很多角度（与日臻和其他JavaScript场馆更受欢迎，因为它的真棒（IMO））。这意味着，承诺对象上调用。那么（）方法，并传递一个函数时承诺解决被调用。在$ HTTP与XHR的结果解决。其他承诺解决与其他的东西。

目前的承诺。于是堆栈的末尾，这是很好的形式把一个.catch（）调用，因为一个承诺内抛出的异常通常进入到位桶，除非你明确地寻找他们。这是一个在一般的缺陷，以承诺的工作方式，并意味着你必须要小心例外。年纪较大的JS引擎，你需要更改到。然后（）'抓'，因为美中不足的是一种在地方一个有趣的词。但我90％肯定上.catch扼流圈任何JS的环境将不会运行角度反正。

I am just getting started with angular and saw that you can define a factory to use in multiple controllers.

I have the below code, which is returning my result in the 'success' method fine. But not outside of the function.

I have a feeling its to do with async, but I'm not too sure how to go forward with it, if it is that.

Any help would be appreciated, so thanks in advanced.

var abyssApp = angular.module('abyssApp', []);

abyssApp.factory('abyssData', function($http) {
    var result,
        products = $http.get('http://abyss.local/products.php');

    products.success(function(data) {
        result = angular.fromJson(data);
        console.log('success: ', result);  // object with data in
    });

    console.log(result);  // undefined
});

abyssApp.controller('ItemListCtrl', function($scope, abyssData) {
    $scope.items = abyssData;
    console.log('abyssData: ', abyssData);  // undefined
});

解决方案

Here's some edits. Note that I'm doing this without really checking, so typeos and mistakes are altogether possible, but the gist of it should make sense.

var abyssApp = angular.module('abyssApp', []);

abyssApp.service('abyssData', function($http) {
    this.products = $http.get('http://abyss.local/products.php');
});

abyssApp.controller('ItemListCtrl', function($scope, abyssData) {
    abyssData.products.then(function(data) {
        console.log(data);
        $scope.items = data;
    }).catch(function(err){console.log(err);});
});

I made it a service rather than a factory since you really only need a service (singleton) there. A factory would be appropriate if there were different URLs you'd be calling, and wanted to do something like product = new abyssData('potatoes') or something.

Generally speaking, $http returns a promise object, which itself isn't the data you need, but instead will resolve to the data you need. This promise pattern is repeated a lot in angular (and is getting more and more popular in other javascript venues, because it's awesome (IMO)). That means, on the promise object, you call the .then() method and pass in a function to be called when the promise is resolved. The $http resolves with the result of the XHR. Other promises resolve with other things.

At the end of the promise .then stack, it's good form to put a .catch() call, because exceptions thrown inside a promise generally go into the bitbucket unless you explicitly look for them. It's an in-general flaw to the way promises work, and means you have to be careful for exceptions. With older JS engines, you need to change that to .then()'catch', as catch is kind of a funny word in places. But I'm 90% sure that any JS environment that chokes on .catch won't run angular anyway.

这篇关于在角JS利用工厂和HTTP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！