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

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 faire des $http appelle alors? et pourquoi?

InformationsquelleAutor Strawberry | 2013-07-15
  1. 174

    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:

    Poignée de la promesse de then() méthode et d'obtenir les données hors de lui. 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):

    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();
});
    • Quelle est la différence entre .then et .success? Ne .then englober à la fois les erreurs et les succès?
    • .then est une fonction réelle de l'retourné promesse. .success est une fonction ajoutée à la promesse faite par $http. La principale différence est tout ce qui est retourné à partir de la première fonction de la .then sera résolu pour la promesse, il ne fonctionne pas de cette façon avec .success.
    • Pour ne citer que cela fonctionne uniquement lorsque vous utilisez un le $scope.foos propriété dans un modèle. Si vous utilisez la même propriété en dehors d'un modèle (par exemple dans une autre fonction), l'objet stocké n'est encore qu'une promesse d'objet.
    • +1 @ClarkPan, vous avez raison, je suppose que je n'étais pas clair à ce sujet.
    • Je suis actuellement en utilisant ce modèle dans une nouvelle angulaire d'application, cependant je me demandais dans un crud page comment faire pour obtenir l'accès à la propriété que j'ai lié à l'application, dans cet exemple, si je voulais prendre les données à partir getFoos et après les modifications. si j'essaie d'accès et le $scope.foos dans ma mise à jour, j'ai la promesse de l'objet et non pas les données, je peux voir comment obtenir les données dans l'objet lui-même, mais il semble vraiment vraiment hacky.des idées?
    • dans ce modèle, c'est le liaison qui sait quoi faire avec la promesse. Si vous avez besoin d'accéder à l'objet à partir de n'importe où ailleurs, vous allez avoir à gérer la .then() de la promesse et de mettre la valeur dans le $scope... myService.getFoos().then(function(value) { $scope.foos = value; });
    • Yep, c'est ce que j'ai fait.
    • Juste une mise à jour sur cette technique, comme de 1.2.0-rc.3, l'auto onu-habillage de promesses a été abandonné, donc cette technique ne fonctionne plus.
    • Obtenu un couple de downvotes ici récemment, sans doute parce qu'il n'était plus en ligne avec la dernière version de Anguleux. J'ai mis à jour la réponse à refléter.
    • C'est un peu déroutant, de l'affectation de la portée.foos à un appel de service qui, lors de la fait, cède la portée.foos à des données réelles.
    • merci, c'était une faute de frappe à gauche de la dernière mise à jour.
    • isnt $http un service lui-même ? pourquoi l'envelopper dans un autre service ?
    • L'Abstraction, la réutilisabilité, l'encapsulation, l'organisation. Un ou plusieurs de ceux-ci. Mais vous n'avez certainement pas pour pour. Cependant, vous avez probablement doit dans de nombreux cas.
    • M'a fallu un certain temps pour obtenir que cela fonctionne. Vous ne savez pas si quelque chose a changé depuis cet été posté, mais j'ai eu à utiliser cette syntaxe module.controller('MyCtrl', ['$scope', 'myservice', function($scope, myService) { }); vs module.controller('MyCtrl', function($scope, myService) {}); ... Donc ce peut-être besoin d'être mis à jour.
    • Merci pour la réponse! Mais attendez, donc pour chaque contrôleur doit faire des appels ajax, vous êtes censé faire également un service qui ne l'appelle? Qui semble sorte de confusion, et beaucoup plus de travail lorsque l'ajax dans le contrôleur quand il fonctionne très bien.
    • c'est juste l'abstraction. Si vous avez un service qui ne vos appels Ajax, il est susceptible d'être plus facile à tester, ou à tout le moins, il sera plus réutilisable. Si vous décidez d'utiliser une autre méthode pour obtenir les données en plus de l'Ajax, c'est tout disparaît, de sorte que vous pouvez changer votre service sans la refactorisation de votre Contrôleur. Vous n'avez pas pour pour ce faire, bien sûr.
    • Toute mise à jour nécessaire pour la 1.4.x? Merci, C§
    • Oui, c'est la meilleure pratique, mais souvent, je pense que c'est le total de overkill. Je suis en train de travailler sur un SPA où pour donner un Itinéraire (html + contrôleur + test + css) le contrôleur est vraiment pas plus compliqué que ci-dessus. Dans ces cas, l'abstraction l'appel http est juste inutile complexité.
    • Ce que sur la gestion des erreurs?

    InformationsquelleAutor Ben Lesh
  2. 45

    La meilleure pratique serait de faire abstraction des $http appel à 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.

    InformationsquelleAutor Clark Pan
  3. 9

    Accepté la réponse a été de me donner la $http is not defined d'erreur donc j'ai dû le faire:

    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) {
    InformationsquelleAutor user1477388
  4. 1

    J'ai mis une réponse à quelqu'un qui voulait un totalement générique de service web dans Angulaire. Je vous recommande juste de le brancher et il prendra soin de tous vos appels de service web sans avoir besoin de code vous même. La réponse est ici:

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

    InformationsquelleAutor cullimorer