টিএল; ডিআর
1) আপনি যখন কারখানাটি ব্যবহার করেন আপনি কোনও বস্তু তৈরি করেন, এতে বৈশিষ্ট্য যুক্ত করুন, তারপরে একই জিনিসটি ফিরিয়ে দিন। আপনি যখন এই ফ্যাক্টরিটিকে আপনার নিয়ামকের মধ্যে পাস করেন তখন অবজেক্টের সেই বৈশিষ্ট্যগুলি এখন আপনার কারখানার মাধ্যমে সেই নিয়ামকটিতে উপলব্ধ।
app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.artist = myFactory.getArtist();
});
app.factory('myFactory', function(){
var _artist = 'Shakira';
var service = {};
service.getArtist = function(){
return _artist;
}
return service;
});
২) আপনি যখন পরিষেবাটি ব্যবহার করছেন তখন কৌণিক এটিকে 'নতুন' কীওয়ার্ড দিয়ে পর্দার আড়ালে ইনস্ট্যান্ট করে। তার কারণে, আপনি 'এটি'-তে বৈশিষ্ট্য যুক্ত করবেন এবং পরিষেবাটি' এটি 'ফেরত দেবে। আপনি যখন পরিষেবাটি আপনার নিয়ামকের মধ্যে পাস করেন, 'এই' এর এই বৈশিষ্ট্যগুলি এখন আপনার পরিষেবার মাধ্যমে সেই নিয়ামকটিতে উপলভ্য হবে।
app.controller('myServiceCtrl', function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service('myService', function(){
var _artist = 'Nelly';
this.getArtist = function(){
return _artist;
}
});
নন টিএল; ডিআর
1) কারখানা
কারখানাগুলি কোনও পরিষেবা তৈরি এবং কনফিগার করার সর্বাধিক জনপ্রিয় উপায়। টিএল যা বলেছিল তার চেয়ে সত্য আর কিছুই নেই; আপনি কেবল একটি অবজেক্ট তৈরি করুন, এতে বৈশিষ্ট্য যুক্ত করুন, তারপরে একই জিনিসটি ফিরিয়ে দিন। তারপরে আপনি যখন কারখানাটি আপনার নিয়ামকের মধ্যে পাস করবেন তখন অবজেক্টের সেই বৈশিষ্ট্যগুলি এখন আপনার কারখানার মাধ্যমে সেই নিয়ামকটিতে উপলব্ধ। আরও বিস্তৃত উদাহরণ নীচে।
app.factory('myFactory', function(){
var service = {};
return service;
});
এখন আমরা 'পরিষেবাদি'র সাথে সংযুক্ত থাকা যে কোনও বৈশিষ্ট্য আমাদের কন্ট্রোলারে' মাইফ্যাক্টরি 'পাস করার পরে আমাদের জন্য উপলব্ধ থাকবে।
এখন আমাদের কলব্যাক ফাংশনে কিছু 'প্রাইভেট' ভেরিয়েবল যুক্ত করা যাক। এগুলি সরাসরি নিয়ামকের কাছ থেকে অ্যাক্সেসযোগ্য হবে না, তবে আমরা প্রয়োজনে এই 'ব্যক্তিগত' ভেরিয়েবলগুলিকে পরিবর্তন করতে সক্ষম হতে শেষ পর্যন্ত 'পরিষেবা' তে কিছু গেটর / সেটার পদ্ধতি সেট করব।
app.factory('myFactory', function($http, $q){
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK';
return _finalUrl
}
return service;
});
এখানে আপনি লক্ষ্য করবেন যে আমরা সেই ভেরিয়েবলগুলি / ফাংশনটিকে 'পরিষেবার' সাথে সংযুক্ত করছি না। আমরা পরে এগুলি ব্যবহার বা সংশোধন করার জন্য কেবল এগুলি তৈরি করছি।
- আইটিউনস এপিআই-র প্রয়োজনীয় বেস ইউআরএল API
- _আর্টিস্ট হলেন সেই শিল্পী যা আমরা দেখতে চাই
- _ফাইনাল ইউআরএল একটি চূড়ান্ত এবং সম্পূর্ণরূপে নির্মিত ইউআরএল যেখানে আমরা আইটিউনসকে কল করব মেকআরএল একটি ফাংশন যা আমাদের আইটিউনস বন্ধুত্বপূর্ণ ইউআরএল তৈরি এবং ফিরিয়ে আনবে।
এখন যেহেতু আমাদের সহায়ক / ব্যক্তিগত ভেরিয়েবল এবং ফাংশনটি রয়েছে, আসুন 'পরিষেবা' অবজেক্টে কিছু বৈশিষ্ট্য যুক্ত করুন। আমরা 'পরিষেবা' যাই থাকি না কেন আমরা যে কোনও নিয়ামককে 'মাই ফ্যাক্টরি' দিয়ে যাব আমরা সরাসরি ব্যবহার করতে সক্ষম হব।
আমরা সেটআরটিস্ট এবং getArtist পদ্ধতি তৈরি করতে যা যা কেবল শিল্পীকে ফিরে আসে বা সেট করে। আমরা এমন একটি পদ্ধতি তৈরি করতে যাচ্ছি যা আমাদের তৈরি ইউআরএল দিয়ে আইটিউনস এপিআই কল করবে। এই পদ্ধতিটি এমন প্রতিশ্রুতি ফেরত যাচ্ছে যা আইটিউনস এপিআই থেকে ডেটা ফিরে আসার পরে পূরণ করবে fulfill আপনার যদি কৌনিক সংক্রান্ত প্রতিশ্রুতি ব্যবহার করার অভিজ্ঞতা বেশি না থেকে থাকে তবে আমি তাদের প্রতি গভীর ডুব দেওয়ার পরামর্শ দিচ্ছি।
নীচে সেটআর্টিস্ট একজন শিল্পীকে গ্রহণ করে এবং আপনাকে শিল্পী সেট করার অনুমতি দেয়। getArtist শিল্পী কলটিউনস ফিরিয়ে আনে প্রথমে আমরা আমাদের with http অনুরোধের সাথে ব্যবহার করব এমন ইউআরএল তৈরি করার জন্য মেকআরল () কল করে। তারপরে এটি একটি প্রতিশ্রুতি অবজেক্ট সেট আপ করে, আমাদের চূড়ান্ত ইউআরএল দিয়ে একটি request HTTP অনুরোধ করে, তারপরে যেহেতু $ http কোনও প্রতিশ্রুতি ফিরিয়ে দেয়, আমরা আমাদের অনুরোধের পরে .success বা .error কল করতে সক্ষম হয়েছি। তারপরে আমরা আইটিউনস ডেটা দিয়ে আমাদের প্রতিশ্রুতিটি সমাধান করি, বা আমরা 'একটি ত্রুটি হয়েছিল' এমন বার্তা দিয়ে তা প্রত্যাখ্যান করি।
app.factory('myFactory', function($http, $q){
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
service.setArtist = function(artist){
_artist = artist;
}
service.getArtist = function(){
return _artist;
}
service.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
return service;
});
এখন আমাদের কারখানাটি সম্পূর্ণ। আমরা এখন যে কোনও কন্ট্রোলারে 'মাইফ্যাক্টরি' ইনজেক্ট করতে সক্ষম হয়েছি এবং তারপরে আমরা আমাদের পদ্ধতিগুলিকে কল করতে সক্ষম হব যা আমরা আমাদের পরিষেবা অবজেক্টের সাথে সংযুক্ত করেছি (সেটআর্টিস্ট, গেটআর্টিস্ট, এবং কলআইটিউনস)।
app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.data = {};
$scope.updateArtist = function(){
myFactory.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myFactory.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
উপরের কন্ট্রোলারে আমরা 'মাইফ্যাক্টরি' পরিষেবাতে ইনজেকশন দিচ্ছি। তারপরে আমরা আমাদের $ স্কোপ অবজেক্টে প্রোপার্টি সেট করি যা 'মাইফ্যাক্টরি' থেকে ডেটা থেকে আসে। উপরের একমাত্র কূটকীয় কোডটি হ'ল যদি আপনি এর আগে প্রতিশ্রুতিগুলির সাথে আচরণ না করেন। যেহেতু কলআইটিউনস একটি প্রতিশ্রুতি ফিরিয়ে দিচ্ছে, আমরা আইটিউনস ডেটা দিয়ে আমাদের প্রতিশ্রুতি পূরণ হওয়ার পরে আমরা .থিন () পদ্ধতিটি ব্যবহার করতে সক্ষম হয়েছি এবং কেবলমাত্র স্কোপ.ডেট.আর্টিস্টডেটা সেট করব। আপনি দেখতে পাবেন যে আমাদের নিয়ামকটি খুব 'পাতলা'। আমাদের সমস্ত যুক্তিযুক্ত এবং অবিচলিত ডেটা আমাদের পরিষেবাতে অবস্থিত, আমাদের নিয়ামকের মধ্যে নয়।
2) পরিষেবা
কোনও পরিষেবা তৈরি করার সময় সবচেয়ে বড় জিনিসটি হ'ল এটি 'নতুন' কীওয়ার্ড দিয়ে ইনস্ট্যান্ট করা। আপনার জাভাস্ক্রিপ্ট গুরুগুলির জন্য এটি আপনাকে কোডের প্রকৃতির একটি বড় ইঙ্গিত দেবে। আপনারা জাভাস্ক্রিপ্টের সীমিত পটভূমিতে বা যারা 'নতুন' কীওয়ার্ডটি আসলে কী করেন তার সাথে খুব বেশি পরিচিত নন, তাদের জন্য কিছু জাভাস্ক্রিপ্ট মূলসূত্রগুলি পর্যালোচনা করুন যা পরিশেষে কোনও পরিষেবার প্রকৃতি বুঝতে আমাদের সহায়তা করবে।
আপনি যখন 'নতুন' কীওয়ার্ডের সাহায্যে কোনও ফাংশনটি আহ্বান করবেন তখন সত্যিই ঘটে যাওয়া পরিবর্তনগুলি দেখতে, আসুন একটি ফাংশন তৈরি করি এবং এটি 'নতুন' কীওয়ার্ডের সাহায্যে প্রার্থনা করি, তারপরে দোভাষী কীভাবে এটি 'নতুন' কীওয়ার্ডটি দেখেন তা দেখান। শেষ ফলাফল উভয়ই এক হবে।
প্রথমে আমাদের কনস্ট্রাক্টর তৈরি করা যাক।
var Person = function(name, age){
this.name = name;
this.age = age;
}
এটি একটি সাধারণ জাভাস্ক্রিপ্ট কনস্ট্রাক্টর ফাংশন। এখন যখনই আমরা 'নতুন' কীওয়ার্ড ব্যবহার করে ব্যক্তি ফাংশনটি শুরু করব তখনই 'এটি' সদ্য নির্মিত বস্তুর সাথে আবদ্ধ থাকবে।
এখন আসুন আমরা আমাদের ব্যক্তির প্রোটোটাইপটিতে একটি পদ্ধতি যুক্ত করি যাতে এটি আমাদের ব্যক্তি 'শ্রেণি'র প্রতিটি উদাহরণে উপলব্ধ।
Person.prototype.sayName = function(){
alert('My name is ' + this.name);
}
এখন, যেহেতু আমরা প্রোটোটাইপের উপর sayName ফাংশনটি রেখেছি, ততক্ষণ প্রতিটি ব্যক্তির সেই উদাহরণটির নাম সতর্কতার জন্য sayName ফাংশনটি কল করতে সক্ষম হবে।
এখন যেহেতু আমাদের পার্সোন কনস্ট্রাক্টর ফাংশন এবং এর প্রোটোটাইপে আমাদের sayName ফাংশন রয়েছে, আসুন প্রকৃতপক্ষে ব্যক্তির একটি উদাহরণ তৈরি করি তারপরে sayName ফাংশনটি কল করি।
var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'
সুতরাং সমস্ত একসাথে একজন ব্যক্তির কনস্ট্রাক্টর তৈরির জন্য কোড, এর প্রোটোটাইপটিতে একটি ফাংশন যুক্ত করে, একজন ব্যক্তি উদাহরণ তৈরি করে এবং তার প্রোটোটাইপে ফাংশনটি কল করার পরে এটি দেখতে এরকম দেখাচ্ছে।
var Person = function(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
alert('My name is ' + this.name);
}
var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'
এখন আপনি জাভাস্ক্রিপ্টে 'নতুন' কীওয়ার্ডটি ব্যবহার করার সময় আসলে কী ঘটছে তা দেখুন। প্রথম যে বিষয়টি আপনার লক্ষ্য করা উচিত তা হ'ল আমাদের উদাহরণে 'নতুন' ব্যবহার করার পরে, আমরা 'টাইলার'-তে কোনও পদ্ধতি (sayName) কল করতে সক্ষম হলাম যেমন এটি কোনও বস্তু - কারণ এটি। সুতরাং প্রথমে, আমরা জানি যে আমাদের পার্সোন কনস্ট্রাক্টর একটি বস্তু ফিরিয়ে দিচ্ছে, আমরা কোডটিতে তা দেখতে পারি কিনা। দ্বিতীয়ত, আমরা জানি যেহেতু আমাদের sayName ফাংশনটি প্রোটোটাইপের উপর অবস্থিত এবং সরাসরি ব্যক্তি উদাহরণে নয়, ব্যক্তি ফাংশনটি যে বস্তুটি ফিরিয়ে দিচ্ছে তা অবশ্যই ব্যর্থ অনুসন্ধানগুলিতে তার প্রোটোটাইপকে অর্পণ করতে হবে। আরও সহজ শর্তে, আমরা যখন টাইলারসেসনেম () ডাকি তখন অনুবাদক বলেন, "ঠিক আছে, আমি 'টিলার' অবজেক্টটি সন্ধান করব যা আমরা সবে তৈরি করেছি, সেনেম ফাংশনটি সন্ধান করব, তারপরে এটিকে কল করব। এক মিনিট অপেক্ষা করুন, আমি এখানে এটি দেখতে পাচ্ছি না - আমি যা দেখি তা হ'ল নাম এবং বয়স, আমাকে প্রোটোটাইপ পরীক্ষা করতে দিন হ্যাঁ, মনে হচ্ছে এটি প্রোটোটাইপে রয়েছে, আমাকে এটি কল করতে দিন।
'নতুন' কীওয়ার্ডটি আসলে জাভাস্ক্রিপ্টে কী করছে সে সম্পর্কে আপনি কীভাবে ভাবতে পারেন তার নীচে কোডটি রয়েছে। এটি মূলত উপরের অনুচ্ছেদের একটি কোড উদাহরণ। আমি 'ইন্টারপ্রিটার ভিউ' বা নোটের ভিতরে দোভাষী যেভাবে কোডটি দেখি সেভাবে রেখেছি।
var Person = function(name, age){
//The line below this creates an obj object that will delegate to the person's prototype on failed lookups.
//var obj = Object.create(Person.prototype);
//The line directly below this sets 'this' to the newly created object
//this = obj;
this.name = name;
this.age = age;
//return this;
}
জাভাস্ক্রিপ্টে 'নতুন' কীওয়ার্ডটি আসলে কী করে সে সম্পর্কে এই জ্ঞান থাকা, কৌণিকের মধ্যে একটি পরিষেবা তৈরি করা বোঝা সহজ হওয়া উচিত।
কোনও পরিষেবা তৈরি করার সময় সবচেয়ে বড় বিষয়টি বুঝতে হবে যে পরিষেবাগুলি 'নতুন' কীওয়ার্ড দিয়ে ইনস্ট্যান্ট হয়। উপরের আমাদের উদাহরণগুলির সাথে সেই জ্ঞানের সংমিশ্রণ করা, আপনাকে এখন স্বীকৃতি দেওয়া উচিত যে আপনি নিজের সম্পত্তি এবং পদ্ধতিগুলি সরাসরি 'এটি'র সাথে সংযুক্ত করছেন যা পরে পরিষেবা থেকেই ফিরে আসবে। এর এটিকে এক নজরে দেখি।
আমরা কারখানার উদাহরণ দিয়ে মূলত যা করেছি তার বিপরীতে, আমাদের কোনও বস্তু তৈরি করার দরকার নেই তারপরে সেই বস্তুটি ফিরিয়ে আনতে হবে কারণ যেমনটি এর আগেও বহুবার উল্লিখিত হয়েছিল, আমরা 'নতুন' কীওয়ার্ডটি ব্যবহার করেছি যাতে দোভাষী সেই অবজেক্টটি তৈরি করে, তার কাছে এটি অর্পণ করা হয় এটি প্রোটোটাইপ, তারপরে আমাদের কাজটি না করে আমাদের জন্য এটি ফিরিয়ে দিন।
প্রথম জিনিসগুলি প্রথমে আমাদের 'ব্যক্তিগত' এবং সহায়ক ফাংশন তৈরি করা যাক। এটি আমাদের পরিচিত কারখানার সাথে ঠিক একই জিনিসটি করার কারণে এটি খুব পরিচিত হওয়া উচিত। আমি এখানে প্রতিটি লাইন কী করে তা ব্যাখ্যা করব না কারণ আমি কারখানার উদাহরণে এটি করেছি, আপনি যদি বিভ্রান্ত হন তবে কারখানার উদাহরণটি পুনরায় পড়ুন।
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
});
এখন, আমরা আমাদের সমস্ত পদ্ধতি যুক্ত করব যা আমাদের নিয়ামকটিতে 'এটি'র জন্য উপলব্ধ available
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.setArtist = function(artist){
_artist = artist;
}
this.getArtist = function(){
return _artist;
}
this.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
});
এখন ঠিক আমাদের কারখানার মতোই, সেটআর্টিস্ট, গেটআরটিস্ট, এবং কলআইটিউনস যে কোনও কন্ট্রোলারে আমরা মাই সার্ভিসটিতে যাব তা উপলব্ধ থাকবে। এখানে মাই সার্ভিস নিয়ন্ত্রক (যা আমাদের ফ্যাক্টরি নিয়ামকের মতো প্রায় একই)
app.controller('myServiceCtrl', function($scope, myService){
$scope.data = {};
$scope.updateArtist = function(){
myService.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myService.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
আমি আগে যেমন উল্লেখ করেছি, একবার আপনি সত্যিই 'নতুন' কী করে তা বুঝতে পারার পরে, পরিষেবাগুলি অ্যাঙ্গুলারের কারখানার কাছে প্রায় অভিন্ন।
