অ্যাঙ্গুলার.জেএস এজেএক্স কল করার জন্য সেরা অনুশীলন কোনটি?

Question

আমি এই নিবন্ধটি পড়ছিলাম: http://eviltrout.com/2013/06/15/ember-vs-angular.html

এবং এটা বলেছে,

এটির সম্মেলনের অভাবের কারণে আমি অবাক হই যে কয়টি অ্যাংুলার প্রকল্পগুলি ক্রেতাদের মধ্যে সরাসরি এজেএক্স কলগুলির মতো খারাপ অভ্যাসের উপর নির্ভর করে? নির্ভরতা ইনজেকশনের কারণে, বিকাশকারীরা রাউটারের পরামিতিগুলিকে নির্দেশের মধ্যে ইনজেকশন দিচ্ছেন? অভিজ্ঞ আঙ্গুলারজেএস বিকাশকারীরা কীভাবে তাদের কোডটি এমনভাবে গঠন করতে চলেছেন যে অভিজ্ঞ অ্যাংুলারজেএস বিকাশকারী বিশ্বাস করেন যে মূর্তিমান?

আমি আসলে $httpআমার Angular.js নিয়ামক থেকে কল করছি from কেন এটি একটি খারাপ অভ্যাস? $httpকল করার জন্য সর্বোত্তম অনুশীলন কী ? এবং কেন?

Comments

এম্বার এবং অ্যাঙ্গুলারগুলির সাথে তুলনা করে আকর্ষণীয় পোস্ট উল্লেখ করার জন্য +1।

— চন্দ্রমণি

আমি

— কৌনিক

এছাড়াও একটি পরিপূরক এছাড়াও আপনি যে জিনিসগুলি মিস করতে পারেন তার জন্য এপিআই পরীক্ষা করে দেখুন: ডকস.আঙ্গুলারজেস.আর.পি.আই

— ক্রিস্টোফ রাউসি

Answer 1

সম্পাদনা: এই উত্তরটি প্রাথমিকভাবে 1.0.X সংস্করণে ফোকাস করেছিল বিভ্রান্তি রোধে এটি আজকাল, ২০১৩-১২-২০১৮ পর্যন্ত অ্যাংুলারের সমস্ত বর্তমান সংস্করণগুলির সর্বোত্তম উত্তরের প্রতিফলনের জন্য পরিবর্তন করা হচ্ছে।

ধারণাটি হ'ল এমন একটি পরিষেবা তৈরি করা যা প্রত্যাবর্তিত ডেটার প্রতিশ্রুতি দেয়, তারপরে আপনার নিয়ামককে কল করুন এবং আপনার প্রতিশ্রুতি সম্পত্তিটি জনবসতি করতে সেখানে প্রতিশ্রুতিটি পরিচালনা করবেন।

সেবা

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):

কৌণিক 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();
});

Comments

কেবল উল্লেখ করার জন্য, এটি কেবল তখনই কাজ করে যখন আপনি $scope.foosকোনও টেমপ্লেটে কোনও সম্পত্তি ব্যবহার করেন । আপনি যদি কোনও টেম্প্লেটের বাইরে একই সম্পত্তি ব্যবহার করতে চান (উদাহরণস্বরূপ অন্য ফাংশনে), সঞ্চিত অবজেক্টটি এখনও একটি প্রতিশ্রুতি অবজেক্ট রয়েছে।

— ক্লার্ক প্যান

আমি বর্তমানে এই প্যাটার্নটি একটি নতুন কৌণিক অ্যাপ্লিকেশনটিতে ব্যবহার করছি, তবে আমি ক্রুড পৃষ্ঠায় ভাবছি যে আমার সুযোগসুবিধিতে আবদ্ধ হওয়া সম্পত্তিটিতে কীভাবে অ্যাক্সেস পাওয়া যায়, উদাহরণস্বরূপ যদি আমি getFoos থেকে ডেটা নিতে চাই এবং পরিবর্তনগুলি পোস্ট করতে চাই তবে এটা। যদি আমি আমার আপডেটে $ স্কোপ.ফুসগুলি চেষ্টা করি এবং অ্যাক্সেস করি তবে আমার কাছে প্রতিশ্রুতিযুক্ত বস্তু রয়েছে এবং ডেটা নয়, আমি কীভাবে অবজেক্টটিতে ডেটা পেতে পারি তা দেখতে পাচ্ছি, তবে এটি সত্যই হ্যাকি.আইডিএস বলে মনে হচ্ছে?

— কেলি মিলিগান

@ কেলিমিলিগান, এই প্যাটার্নে, এটি বাধ্যতামূলক যে প্রতিশ্রুতি দিয়ে কী করতে হবে তা জানে। যদি আপনাকে অন্য কোথাও থেকে এই অ্যাক্সেসের প্রয়োজন হয় তবে আপনাকে .then()প্রতিশ্রুতিটি পরিচালনা করতে হবে এবং মানটি $ সুযোগের মধ্যে রাখতে হবে ...myService.getFoos().then(function(value) { $scope.foos = value; });

— বেন লেশ

এই কৌশলটির মাত্র একটি আপডেট, ২.০.০-আরসি ৩.২ অনুসারে প্রতিশ্রুতিগুলির স্বয়ংক্রিয়ভাবে মোড়ক ছাড়ানো হয়েছে, সুতরাং এই কৌশলটি আর কাজ করবে না।

— ক্লার্ক প্যান

সম্প্রতি এখানে বেশ কয়েকটি ডাউনভোট পেয়েছেন, সম্ভবতঃ কারণ এটি Angular এর সর্বশেষ সংস্করণটির সাথে আর লাইন ছিল না। আমি প্রতিফলিত উত্তর আপডেট করেছি।

— বেন লেশ

Answer 2

সর্বোত্তম অনুশীলনটি হ'ল $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এই জাতীয় কলটিকে বিমূর্ত করা আপনাকে একাধিক নিয়ামক জুড়ে এই কোডটি পুনরায় ব্যবহার করতে দেয়। যখন এই ডেটার সাথে ইন্টারেক্ট করে এমন কোডটি আরও জটিল হয়ে উঠবে তখন এটি প্রয়োজনীয় হয়ে উঠবে, সম্ভবত আপনি আপনার নিয়ামকটিতে ডেটা ব্যবহারের আগে এটি প্রক্রিয়া করতে চান এবং সেই প্রক্রিয়াটির ফলাফলকে ক্যাশে করেন যাতে আপনাকে এটি পুনরায় প্রক্রিয়া করতে সময় ব্যয় করতে হবে না।

আপনার অ্যাপ্লিকেশন যে ডেটা ব্যবহার করতে পারে তার উপস্থাপনা (বা মডেল) হিসাবে আপনার 'পরিষেবা' ভাবা উচিত।

Answer 3

গৃহীত উত্তরটি আমাকে $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) {

Answer 4

আমি কৌনিকটিতে সম্পূর্ণ জেনেরিক ওয়েব পরিষেবা চেয়েছিল এমন ব্যক্তির জন্য একটি উত্তর রেখেছি। আমি কেবল এটি প্লাগ ইন করার পরামর্শ দিচ্ছি এবং এটি সমস্ত নিজের কোড করার প্রয়োজন ছাড়াই এটি আপনার সমস্ত ওয়েব পরিষেবা কলগুলির যত্ন নেবে। উত্তরটি এখানে:

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