it-swarm.dev

ما هي أفضل الممارسات لصنع AJAX استدعاء في Angular.js؟

كنت أقرأ هذا المقال: http://eviltrout.com/2013/06/15/ember-vs-angular.html

وقال ،

نظرًا لعدم وجود اصطلاحات ، أتساءل عن عدد Angular المشروعات التي تعتمد على الممارسات السيئة مثل AJAX المكالمات مباشرة داخل وحدات التحكم؟ بسبب حقن التبعية ، هل يقوم المطورون بحقن معلمات جهاز التوجيه في التوجيهات؟ هل سيقوم مطورو AngularJS المبتدئون ببناء التعليمات البرمجية الخاصة بهم بطريقة يعتقد مطور AngularJS ذي الخبرة أنها اصطلاحية؟

أقوم بإجراء مكالمات $http بالفعل من جهاز التحكم Angular.js الخاص بي. لماذا هي ممارسة سيئة؟ ما هي أفضل الممارسات لإجراء مكالمات $http إذن؟ و لماذا؟

150
Strawberry

تحرير: كانت هذه الإجابة في المقام الأول التركيز على الإصدار 1.0.X. لمنع حدوث تشويش يتم تغييره ليعكس أفضل إجابة لجميع الإصدارات الحالية من Angular اعتبارًا من اليوم ، 2013-12-05.

تتمثل الفكرة في إنشاء خدمة تقوم بإرجاع وعد للبيانات التي تم إرجاعها ، ثم استدعاء ذلك في وحدة التحكم الخاصة بك والتعامل مع الوعد هناك لملء خاصية النطاق بالدولار.

الخدمة

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

المتحكم:

تعامل مع طريقة الوعد then() واحصل على البيانات منه. قم بتعيين خاصية النطاق $ ، وقم بأي شيء آخر قد تحتاج إلى القيام به.

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

دقة العرض داخل العرض (1.0.X فقط):

في Angular 1.0.X ، الهدف من الإجابة الأصلية هنا ، ستحصل الوعود على معاملة خاصة من العرض. عندما يتم حلها ، سيتم ربط قيمتها التي تم حلها بالعرض. لقد تم إهمال هذا في 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();
});
174
Ben Lesh

تتمثل أفضل الممارسات في تجريد رمز $http من "خدمة" توفر البيانات لوحدة التحكم الخاصة بك:

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

سيتيح لك استدعاء $http مثل هذه الطريقة إعادة استخدام هذا الرمز عبر وحدات تحكم متعددة. يصبح هذا ضروريًا عندما تصبح الشفرة التي تتفاعل مع هذه البيانات أكثر تعقيدًا ، وربما ترغب في معالجة البيانات قبل استخدامها في وحدة التحكم الخاصة بك ، وتخزين نتيجة هذه العملية مؤقتًا حتى لا تضطر إلى قضاء وقت في إعادة معالجتها.

يجب أن تفكر في "الخدمة" كتمثيل (أو نموذج) للبيانات التي يمكن أن يستخدمها تطبيقك.

45
Clark Pan

كانت الإجابة المقبولة تعطيني الخطأ $http is not defined لذلك اضطررت للقيام بذلك:

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

الفرق الرئيسي هو هذا الخط:

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

وضعت إجابة لشخص أراد خدمة ويب عامة تمامًا باللغة Angular. أوصي فقط بتوصيله وسيتولى جميع مكالمات خدمة الويب دون الحاجة إلى تشفيرها جميعًا بنفسك. الجواب هنا:

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

1
cullimorer