angularjs $scope - أنغولارجس:خدمة تخدم مصادر عناوين ورل / مصادر موارد متعددة؟




in services (3)

لدي خدمة / مزود الزاوي الذي يخدم البيانات جسون إلى وحدة تحكم بلدي الذي يعمل كبيرة:

    angular.module('myApp.services', ['ngResource']).
      factory("statesProvider", function($resource){
      return $resource('../data/states.json', {}, {
        query: {method: 'GET', params: {}, isArray: false}
      });
    });

ولكن أنا أيضا بحاجة إلى خدمة البيانات جسون لنفس وحدة تحكم من counties.json ملف آخر. جسون.

أين يمكنني معرفة كيفية كتابة خدمة تقدم كلا الملفين إلى وحدة التحكم الخاصة بي؟


Answers

أفترض أنك تريد تنفيذ بعض التعليمات البرمجية عند تحميل كل من الملفات. الوعود تعمل بشكل جيد حقا لهذا. لا أعتقد أن الموارد تعود الوعود، ولكن يمكنك استخدام خدمة هتب $ لمكالمات أجاكس بسيطة.

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

factory('states',function($http) {
    return $http.get('../data/states.json');
}).
factory('countries',function($http) {
    return $http.get('../data/countries.json');
}).
factory('statesAndCountries', function($q, states, countries) {
    return $q.all([states, countries]);
});

ثم في وحدة تحكم:

statesAndCountries.then(function(data) {
    var stateData = data[0];
    var countryData = data[1];
    // do stuff with stateData and countryData here
});

يمكنك تحديث الخدمة لإرجاع تجزئة الموارد، وليس واحدة:

angular.module('myApp.services', ['ngResource']).
  factory("geoProvider", function($resource) {
    return {
      states: $resource('../data/states.json', {}, {
        query: { method: 'GET', params: {}, isArray: false }
      }),
      countries: $resource('../data/countries.json', {}, {
        query: { method: 'GET', params: {}, isArray: false }
      })
    };
  });

سوف تكون قادرا على استخدامه إضافة .query() في نهاية اسم geoProvider.states.query() أي geoProvider.states.query() و geoProvider.countries.query() و myApp.services يجب أن يتم حقنه في وحدة التحكم الخاصة بك، ثم حقن خدمة geoProvider في وحدة تحكم نفسها كذلك.


من الواضح أنه لا يوجد فحص دوري Scope ما إذا كان هناك أي تغيير في الكائنات المرتبطة به. لا تتم مراقبة جميع الكائنات المرتبطة بالنطاق. نطاق prototypically يحافظ على مراقبي $$ . Scope لا يتكرر إلا من خلال هؤلاء $$watchers عندما يسمى $digest .

يضيف Angular مراقباً إلى مراقبي $$ لكل من هؤلاء

  1. {{التعبير}} - في النماذج (وفي أي مكان آخر يتضمن تعبيرًا) أو عندما نحدد نموذج ng.
  2. نطاق $. $ watch ('expression / function') - في JavaScript الخاص بك ، يمكننا فقط إرفاق كائن نطاق للزاوية لمشاهدة.

تأخذ وظيفة المشاهدة $ في ثلاث معايير:

  1. الأول هو وظيفة مراقب تقوم فقط بإرجاع الكائن أو يمكننا فقط إضافة تعبير.

  2. الثانية هي وظيفة المستمع والتي سيتم استدعاؤها عندما يكون هناك تغيير في الكائن. سيتم تنفيذ جميع الأمور مثل تغييرات DOM في هذه الوظيفة.

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

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

هناك شيء مثير للاهتمام في Angular يسمى Digest Cycle. تبدأ دورة $ digest نتيجة استدعاء النطاق $. $ digest (). افترض أنك قمت بتغيير نموذج نطاق $ في وظيفة معالج من خلال توجيه ng-click. في هذه الحالة ، يقوم AngularJS تلقائيًا بتشغيل دورة $ digest عن طريق استدعاء $ digest () ، بالإضافة إلى ng-click ، ​​هناك العديد من التوجيهات / الخدمات المضمنة الأخرى التي تسمح لك بتغيير النماذج (مثل ng-model ، $ timeout ، الخ) ويبدأ تلقائيًا دورة $ digest. يبدو أن التنفيذ التقريبي لمقدار $ $ يشبه هذا.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

إذا استخدمنا الدالة setTimeout () لـ JavaScript لتحديث نموذج نطاق ، فلن يكون لدى Angular أي طريقة لمعرفة ما قد تغيره. في هذه الحالة تقع على عاتقنا مسئولية استدعاء $ apply () يدويًا ، مما يؤدي إلى تشغيل دورة $ digest. وبالمثل ، إذا كان لديك توجيه يقوم بإعداد وحدة إصغاء حدث DOM وتغيير بعض النماذج داخل دالة المعالج ، فستحتاج إلى الاتصال بـ $ apply () لضمان سريان مفعول التغييرات. تتمثل الفكرة الكبرى لتطبيق $ في أنه يمكننا تنفيذ بعض الرموز التي لا تدرك Angular ، فقد يستمر هذا الرمز في تغيير الأشياء في النطاق. إذا قمنا بلف هذا الرمز في $ apply ، فسوف يتولى الأمر استدعاء $ digest (). تطبيق تقريبي $ apply ().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};




angularjs controller