Jaka jest najlepsza praktyka wykonywania połączenia AJAX w Angular.js?

Question

Jaka jest najlepsza praktyka wykonywania połączenia AJAX w Angular.js?

Czytałem ten artykuł: http://eviltrout.com/2013/06/15/ember-vs-angular.html

I powiedział:

Ze względu na brak konwenansów, zastanawiam się, ile kanciastych projektów polegać na złych praktykach, takich jak wywołania AJAX bezpośrednio w kontrolerach? Ze względu na iniekcję zależności, czy deweloperzy wstrzykują router parametry w dyrektywach? Czy początkujący Programiści AngularJS będą struktura ich kodu w sposób, który doświadczony programista AngularJS wiara jest idiomatyczna?

[[2]}wykonuję $http telefony z mojego kątowego.kontroler js. Dlaczego jest to zła praktyka? Jaka jest zatem najlepsza praktyka wykonywania $http połączeń? i dlaczego?

148

angularjs

Author: Strawberry, 2013-07-15

Source

4 answers

Najlepszą praktyką byłoby abstrakcyjne wezwanie $http do "usługi", która dostarcza dane administratorowi:

module.factory('WidgetData', function($http){
    return {
        get : function(params){
            return $http.get('url/to/widget/data', {
                params : params
            });
        }
    }
});

module.controller('WidgetController', function(WidgetData){
    WidgetData.get({
        id : '0'
    }).then(function(response){
        //Do what you will with the data.
    })
});

Abstrakcja wywołania $http w ten sposób pozwoli na ponowne użycie tego kodu w wielu kontrolerach. Staje się to konieczne, gdy kod, który współdziała z tymi danymi, staje się bardziej złożony, być może chcesz przetworzyć dane przed użyciem ich w kontrolerze i buforować wynik tego procesu, dzięki czemu nie będziesz musiał tracić czasu Na ponowne przetwarzanie to.

Powinieneś myśleć o "usłudze" jako o reprezentacji (lub modelu) danych, z których może korzystać Twoja aplikacja.

45

Author: Clark Pan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-15 03:37:19

Zaakceptowana odpowiedź dawała mi błąd $http is not defined więc musiałem to zrobić:

var policyService = angular.module("PolicyService", []);
policyService.service('PolicyService', ['$http', function ($http) {
    return {
        foo: "bar",
        bar: function (params) {
            return $http.get('../Home/Policy_Read', {
                params: params
            });
        }
    };
}]);

Główną różnicą jest ta linia:

policyService.service('PolicyService', ['$http', function ($http) {

8

Author: user1477388,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-20 19:16:28

Umieściłem odpowiedź dla kogoś, kto chciał całkowicie ogólny serwis internetowy w Angular. Polecam po prostu podłączyć go i zajmie się wszystkimi połączeniami z usługami sieciowymi bez konieczności kodowania ich wszystkich samodzielnie. Odpowiedź jest tutaj:

Https://stackoverflow.com/a/38958644/5349719

1

Author: cullimorer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:17

score 172 · Accepted Answer

EDIT: ta odpowiedź skupiała się głównie na wersji 1.0.X. Aby zapobiec zamieszaniu, został zmieniony, aby odzwierciedlić najlepszą odpowiedź dla wszystkich obecnych wersji Angular na dzień dzisiejszy, 2013-12-05.

Chodzi o stworzenie usługi, która zwróci obietnicę do zwróconych danych, a następnie wywoła ją w kontrolerze i obsłuży tam obietnicę, aby wypełnić właściwość $scope.

Serwis

module.factory('myService', function($http) {
   return {
        getFoos: function() {
             //return the promise directly.
             return $http.get('/foos')
                       .then(function(result) {
                            //resolve the promise as the data
                            return result.data;
                        });
        }
   }
});

Kontroler:

Obsługiwać metodę then() obietnicy i wyciągnij z niego dane. Ustaw właściwość $ scope i zrób wszystko, co może być konieczne.

module.controller('MyCtrl', function($scope, myService) {
    myService.getFoos().then(function(foos) {
        $scope.foos = foos;
    });
});

In-View Promise Resolution (1.0.Tylko X):

In Angular 1.0.X, cel oryginalnej odpowiedzi tutaj, obietnice otrzyma specjalne traktowanie przez Widok. Gdy zostaną rozwiązane, ich rozwiązana wartość zostanie powiązana z widokiem. to zostało wycofane w 1.2.X

module.controller('MyCtrl', function($scope, myService) {
    // now you can just call it and stick it in a $scope property.
    // it will update the view when it resolves.
    $scope.foos = myService.getFoos();
});