Quelle est la meilleure pratique pour effectuer un appel AJAX dans Angular.js?

Question

J'ai été la lecture de cet article: http://eviltrout.com/2013/06/15/ember-vs-angular.html

Et il a dit,

En raison de l'absence de conventions, je me demande combien Angulaire des projets s'appuyer sur les mauvaises pratiques telles que les appels AJAX directement dans les contrôleurs? En raison de l'injection de dépendance, sont les développeurs de l'injection de routeur les paramètres dans les directives? Êtes novice AngularJS les développeurs à la structure de leur code d'une manière qu'une expérience de développeur AngularJS croit est idiomatiques?

Je suis en train de faire $http des appels à partir de mon Angular.js le contrôleur. Pourquoi est-ce une mauvaise pratique? Quelle est la meilleure pratique pour la fabrication de $http des appels? et pourquoi?

Answer 1

EDIT: Cette réponse a été principalement axées sur la version 1.0.X. Pour éviter toute confusion, il est modifié pour refléter la meilleure réponse pour TOUTES les versions actuelles de Angulaire d'aujourd'hui, le 2013-12-05.

L'idée est de créer un service qui retourne une promesse aux données renvoyées, puis appelez dans votre contrôleur et de gérer la promesse là pour remplir votre $champ d'application de la propriété.

Le Service

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;
                        });
        }
   }
});

Le Contrôleur:

La poignée de la promesse de l' then() méthode et obtenir les données. Définir le $champ d'application de la propriété, et de faire tout autre chose que vous devez faire.

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

En Vue Promesse De Résolution (1.0.X uniquement):

Dans Angulaire 1.0.X, la cible de l'origine de réponse ici, promesses d'obtenir un traitement spécial par la Vue. Quand ils n'en résolvent, leur valeur résolue sera lié à la vue. Cela a été déprécié en 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();
});

Answer 2

La meilleure pratique serait de faire abstraction des $http appel dans un "service" qui fournit les données de votre contrôleur:

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.
    })
});

L'abstraction de l' $http appeler comme cela vous permettra de réutiliser ce code sur plusieurs contrôleurs. Ceci est nécessaire lorsque le code qui interagit avec ces données devient de plus en plus complexe, peut-être que vous souhaitez traiter les données avant de l'utiliser dans votre contrôleur, et de mettre en cache le résultat de ce processus de sorte que vous n'aurez pas à passer du temps à re-traitement.

Vous devriez penser à un "service" comme une représentation (ou Modèle) de données que votre application peut utiliser.

Answer 3

La réponse acceptée me donnait l'erreur $http is not defined , alors j'ai dû faire ceci:

 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
            });
        }
    };
}]);
 

La principale différence étant cette ligne:

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