TL; DR
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;
});
2) ඔබ සේවාව භාවිතා කරන විට , කෝණික තිරය පිටුපස එය 'නව' මූල පදය සමඟ සවි කරයි. එම හේතුව නිසා, ඔබ 'මේ' වෙත දේපල එකතු කරන අතර සේවාව 'මෙය' නැවත ලබා දෙනු ඇත. ඔබ ඔබේ පාලකයට සේවාව ලබා දුන් විට, 'මේ' හි ඇති ගුණාංග දැන් ඔබේ සේවාව හරහා එම පාලකයට ලබා ගත හැකිය.
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;
});
දැන් අපි 'සේවාවට' අනුයුක්ත කරන ඕනෑම ගුණාංගයක් අපගේ පාලකයට 'myFactory' සමත් වූ විට අපට ලබා ගත හැකිය.
දැන් අපි අපගේ ඇමතුම් ආපසු ගැනීමේ කාර්යයට 'පුද්ගලික' විචල්‍යයන් කිහිපයක් එකතු කරමු. මේවා පාලකයෙන් කෙලින්ම ප්‍රවේශ විය නොහැකි නමුත් අවශ්‍ය විටෙක මෙම 'පුද්ගලික' විචල්‍යයන් වෙනස් කිරීමට හැකිවන පරිදි අපි 'සේවාව' මත යම්කිසි / සැකසුම් ක්‍රම කිහිපයක් සකස් කරමු.
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;
});
මෙහිදී ඔබ දකිනු ඇත්තේ අප එම විචල්‍යයන් / ක්‍රියාකාරිත්වය 'සේවාවට' අනුයුක්ත නොකරන බවයි. අපි ඒවා නිර්මාණය කරන්නේ පසුව ඒවා භාවිතා කිරීම හෝ වෙනස් කිරීම සඳහා ය.
- baseUrl යනු අයිටියුන්ස් API ට අවශ්‍ය මූලික URL ය
- _artist යනු අප සොයා බැලීමට කැමති කලාකරුවා ය
- _finalUrl යනු අයිටියුන්ස් වෙත අප ඇමතුමක් ලබා දෙන අවසාන සහ සම්පුර්ණයෙන්ම සාදන ලද URL ය. අපගේ අයිටියුන්ස් හිතකාමී URL නිර්මාණය කර නැවත ලබා දෙන ශ්‍රිතයකි.
දැන් අපගේ සහායක / පෞද්ගලික විචල්‍යයන් සහ ක්‍රියාකාරිත්වය ක්‍රියාත්මක වන බැවින්, අපි 'සේවා' වස්තුවට ගුණාංග කිහිපයක් එකතු කරමු. අප 'සේවාව' මත තැබුවද, අපි 'myFactory' පසු කරන ඕනෑම පාලකයක directly ජුව භාවිතා කිරීමට අපට හැකි වේ.
අපි setArtist සහ getArtist ක්‍රම නිර්මාණය කිරීමට යන්නේ කලාකරුවා නැවත පැමිණීමට හෝ සැකසීමට ය. අපගේ නිර්මාණය කළ URL සමඟ අයිටියුන්ස් ඒපීඅයි යනුවෙන් හැඳින්වෙන ක්‍රමයක් ද අපි නිර්මාණය කිරීමට යන්නෙමු. මෙම ක්‍රමය මඟින් අයිටියුන්ස් ඒපීඅයි වෙතින් දත්ත නැවත පැමිණි පසු ඉටු වන පොරොන්දුවක් ලබා දෙනු ඇත. ඔබට කෝණික භාෂාවෙන් පොරොන්දු භාවිතා කර අත්දැකීම් නොමැති නම්, ඒවා පිළිබඳව ගැඹුරු කිමිදීමක් කිරීමට මම තරයේ නිර්දේශ කරමි.
SetArtist ට පහළින් කලාකරුවෙකු පිළිගෙන කලාකරුවා සැකසීමට ඔබට ඉඩ සලසයි. getArtist අපගේ $ http ඉල්ලීම සමඟ අප භාවිතා කරන URL එක තැනීම සඳහා ඇමතුම අයිටියුන්ස් විසින් මුලින්ම makeUrl () අමතයි. එවිට එය පොරොන්දු වස්තුවක් සකසයි, අපගේ අවසන් යූආර්එල් සමඟ request http ඉල්ලීමක් කරයි, එවිට $ http පොරොන්දුවක් ලබා දෙන නිසා, අපගේ ඉල්ලීමෙන් පසු .සකස් හෝ .දොර ලෙස ඇමතිය හැකිය. පසුව අපි අයිටියුන්ස් දත්ත සමඟ අපගේ පොරොන්දුව විසඳා ගනිමු, නැතහොත් 'දෝෂයක් ඇති බව' පණිවිඩයක් මගින් ප්‍රතික්ෂේප කරමු.
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;
});
දැන් අපේ කර්මාන්ත ශාලාව සම්පූර්ණයි. අපට දැන් ඕනෑම පාලකයකුට 'myFactory' එන්නත් කළ හැකි අතර අපගේ සේවා වස්තුවට (setArtist, getArtist, සහ callItunes) අමුණා ඇති අපගේ ක්‍රමවේදයන් ඇමතීමට අපට හැකි වේ.
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);
})
}
});
ඉහත පාලකයේ අපි 'myFactory' සේවාවට එන්නත් කරමු. ඉන්පසු අපි 'myFactory' වෙතින් දත්ත වලින් එන අපගේ $ විෂය පථය මත ගුණාංග සකස් කරමු. ඉහත ඇති එකම උපක්‍රම කේතය නම් ඔබ මීට පෙර කිසි දිනෙක පොරොන්දු සමඟ කටයුතු නොකළේ නම්. කෝල් අයිටියුන්ස් පොරොන්දුවක් ලබා දෙන නිසා, අපට .තන් () ක්‍රමය භාවිතා කළ හැකි අතර අයිටියුන්ස් දත්ත සමඟ අපගේ පොරොන්දුව ඉටු වූ පසු $ scope.data.artistData පමණක් සකසන්න. අපගේ පාලකය ඉතා සිහින් බව ඔබට පෙනෙනු ඇත. අපගේ සියලු තාර්කික හා නිරන්තර දත්ත පිහිටා ඇත්තේ අපගේ පාලකයේ නොව අපගේ සේවාවේ ය.
2) සේවය
සේවාවක් නිර්මාණය කිරීමේදී ගනුදෙනු කිරීමේදී දැනගත යුතු ලොකුම දෙය නම් එය 'නව' මූල පදය සමඟ ක්ෂණිකව ක්‍රියාත්මක වීමයි. ඔබට ජාවාස්ක්‍රිප්ට් ගුරු වරුන් සඳහා මෙය කේතයේ ස්වභාවය පිළිබඳව විශාල ඉඟියක් ලබා දිය යුතුය. ජාවාස්ක්‍රිප්ට් හි සීමිත පසුබිමක් ඇති ඔබ සඳහා හෝ 'නව' මූල පදය ඇත්ත වශයෙන්ම කරන්නේ කුමක්ද යන්න ගැන එතරම් අවබෝධයක් නැති අය සඳහා, සේවාවක ස්වභාවය අවබෝධ කර ගැනීමට අපට උපකාරී වන ජාවාස්ක්‍රිප්ට් මූලධර්ම කිහිපයක් සමාලෝචනය කරමු.
ඔබ 'නව' මූල පදය සමඟ ශ්‍රිතයක් කැඳවන විට සිදුවන වෙනස්කම් සැබවින්ම දැකීමට, අපි ශ්‍රිතයක් නිර්මාණය කර එය 'නව' යතුරුපදය සමඟ ආයාචනා කරමු, ඉන්පසු 'නව' මූල පදය දකින විට පරිවර්තකයා කරන්නේ කුමක්දැයි පෙන්වමු. අවසාන ප්‍රති results ල දෙකම එක හා සමාන වේ.
මුලින්ම අපි අපේ ඉදිකිරීම්කරු නිර්මාණය කරමු.
var Person = function(name, age){
this.name = name;
this.age = age;
}
මෙය සාමාන්‍ය ජාවාස්ක්‍රිප්ට් ඉදිකිරීම් ශ්‍රිතයකි. දැන් අපි 'නව' මූල පදය භාවිතා කරමින් පුද්ගල ශ්‍රිතය ඉල්ලා සිටින සෑම විටම, 'මෙය' අලුතින් සාදන ලද වස්තුවට බැඳී ඇත.
දැන් අපි අපගේ පුද්ගලයාගේ මූලාකෘතියට ක්‍රමයක් එකතු කරමු, එවිට එය අපගේ පුද්ගල 'පන්තියේ' සෑම අවස්ථාවකම ලබා ගත හැකිය.
Person.prototype.sayName = function(){
alert('My name is ' + this.name);
}
දැන්, අපි 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 ශ්‍රිතය මූලාකෘතිය මත පිහිටා ඇති අතර එය සෘජුවම පුද්ගල උදාහරණය මත නොව, පුද්ගල ශ්‍රිතය නැවත පැමිණෙන වස්තුව අසාර්ථක බැලීම් මත එහි මූලාකෘතියට පැවරිය යුතු බව අපි දනිමු. වඩාත් සරළව කිවහොත්, අපි 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;
}
});
දැන්, අපගේ පාලකයේ ඇති අපගේ සියලු ක්‍රම 'මේ' වෙත අමුණන්නෙමු.
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;
}
});
දැන් අපගේ කර්මාන්තශාලාවේදී මෙන්, setArtist, getArtist, සහ callItunes අප විසින් කුමන සේවාවක් වෙත ඇතුළු කළත් ඕනෑම පාලකයකින් ලබා ගත හැකිය. මෙන්න myService පාලකය (එය අපගේ කර්මාන්තශාලා පාලකයට සමාන වේ).
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);
})
}
});
මා කලින් සඳහන් කළාක් මෙන්, 'නව' කරන්නේ කුමක්දැයි ඔබ සැබවින්ම වටහා ගත් පසු, සේවාවන් කෝණික කර්මාන්තශාලාවලට බොහෝ දුරට සමාන වේ.
