එය අතර ඇති වෙනස්කම් මොනවාද Service, Providerහා FactoryAngularJS දී?

AngularJS තැපැල් ලැයිස්තුවෙන් මට සේවාවක් එදිරිව කර්මාන්තශාලා එදිරිව සැපයුම්කරු සහ ඒවායේ එන්නත් භාවිතය විස්තර කරන විස්මිත නූලක් ලැබුණි . පිළිතුරු සම්පාදනය කිරීම:

සේවාවන්

වාක්‍ය ඛණ්ඩය: module.service( 'serviceName', function );
ප්‍රති ult ලය: සේවා නාමය එන්නත් කළ හැකි තර්කයක් ලෙස ප්‍රකාශ කරන විට ඔබට ශ්‍රිතයේ උදාහරණයක් ලබා දෙනු ඇත. වෙනත් වචන වලින් කිවහොත් new FunctionYouPassedToService() .

කර්මාන්තශාලා

වාක්‍ය ඛණ්ඩය: ප්‍රති ult ලයmodule.factory( 'factoryName', function );
: කර්මාන්තශාලා නාමය එන්නත් කළ හැකි තර්කයක් ලෙස ප්‍රකාශ කරන විට, මොඩියුලය.ෆැක්ටරි වෙත යොමු කරන ලද ශ්‍රිත යොමු කිරීම මඟින් ආපසු ලබා දෙන අගය ඔබට ලබා දෙනු ඇත .

සපයන්නන්

වාක්‍ය ඛණ්ඩය: module.provider( 'providerName', function );
ප්‍රති ult ලය: සැපයුම්කරුගේ නම එන්නත් කළ හැකි තර්කයක් ලෙස ප්‍රකාශ කරන විට ඔබට ලබා දෙනු ඇත (new ProviderFunction()).$get() . ProviderFunctionConst get ලබා ගැනීමේ ක්‍රමය හැඳින්වීමට පෙර ඉදිකිරීම්කරුගේ ක්‍රියාව ක්ෂණිකව ක්‍රියාත්මක වේ - ශ්‍රිතය යොමු කිරීම module.provider වෙත යවනු ලැබේ.

මොඩියුල වින්‍යාස කිරීමේ අවධියේදී ඒවා වින්‍යාසගත කළ හැකි වාසිය සැපයුම්කරුවන්ට ඇත.

සපයා ඇති කේතය සඳහා මෙහි බලන්න .

මිස්කෝ විසින් තවත් පැහැදිලි කිරීමක් මෙන්න:

provide.value('a', 123);

function Controller(a) {
  expect(a).toEqual(123);
}

මෙම අවස්ථාවේ දී ඉන්ජෙක්ටර් සරලවම අගය ලබා දෙයි. නමුත් ඔබට අගය ගණනය කිරීමට අවශ්‍ය නම් කුමක් කළ යුතුද? ඉන්පසු කර්මාන්ත ශාලාවක් භාවිතා කරන්න

provide.factory('b', function(a) {
  return a*2;
});

function Controller(b) {
  expect(b).toEqual(246);
}

ඒ නිසා factoryවටිනාකම නිර්මාණය කිරීම සඳහා වග කිව යුතු වන ශ්රිතයක් වේ. කර්මාන්තශාලාවේ ක්‍රියාකාරිත්වයට වෙනත් පරායත්තතා ඉල්ලා සිටිය හැකි බව සලකන්න.

නමුත් ඔබට වැඩිපුර OO වීමට අවශ්‍ය නම් සහ ග්‍රීටර් නමින් පන්තියක් තිබිය යුතු නම් කුමක් කළ යුතුද?

function Greeter(a) {
  this.greet = function() {
    return 'Hello ' + a;
  }
}

එවිට ක්ෂණික වීමට ඔබට ලිවීමට සිදුවේ

provide.factory('greeter', function(a) {
  return new Greeter(a);
});

එවිට අපට මේ ආකාරයෙන් පාලකයේ 'සුබ පැතුම්' ඉල්ලිය හැකිය

function Controller(greeter) {
  expect(greeter instanceof Greeter).toBe(true);
  expect(greeter.greet()).toEqual('Hello 123');
}

නමුත් එය ඉතා නරක ය. මෙය ලිවීමට කෙටි ක්‍රමයක් වනු ඇතprovider.service('greeter', Greeter);

Greeterඑන්නත් කිරීමට පෙර පන්තිය වින්‍යාස කිරීමට අපට අවශ්‍ය නම් කුමක් කළ යුතුද ? එවිට අපට ලිවිය හැකිය

provide.provider('greeter2', function() {
  var salutation = 'Hello';
  this.setSalutation = function(s) {
    salutation = s;
  }

  function Greeter(a) {
    this.greet = function() {
      return salutation + ' ' + a;
    }
  }

  this.$get = function(a) {
    return new Greeter(a);
  };
});

එවිට අපට මෙය කළ හැකිය:

angular.module('abc', []).config(function(greeter2Provider) {
  greeter2Provider.setSalutation('Halo');
});

function Controller(greeter2) {
  expect(greeter2.greet()).toEqual('Halo 123');
}

පැත්තක නෝට්ටු ලෙස, service, factory, සහ valueසියලු සපයන්නා පැනනගී.

provider.service = function(name, Class) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.instantiate(Class);
    };
  });
}

provider.factory = function(name, factory) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.invoke(factory);
    };
  });
}

provider.value = function(name, value) {
  provider.factory(name, function() {
    return value;
  });
};

JS Fiddle Demo

"Hello World" සමග උදාහරණයක් factory/ service/ provider:

var myApp = angular.module('myApp', []);

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!";
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});
        

function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    
    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
    {{hellos}}
</div>
</body>

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) ඔබ සේවාව භාවිතා කරන විට , AngularJS තිරය පිටුපස 'නව' මූල පදය සමඟ එය ස්ථාපනය කරයි. එම හේතුව නිසා, ඔබ 'මේ' වෙත දේපල එකතු කරන අතර සේවාව 'මෙය' නැවත ලබා දෙනු ඇත. ඔබ ඔබේ පාලකය වෙත සේවාව ලබා දුන් විට, 'මේ' හි ඇති ගුණාංග දැන් ඔබේ සේවාව හරහා එම පාලකයට ලබා ගත හැකිය.

app.controller(‘myServiceCtrl’, function($scope, myService){
  $scope.artist = myService.getArtist();
});

app.service(‘myService’, function(){
  var _artist = ‘Nelly’;
  this.getArtist = function(){
    return _artist;
  }
});

3) ඔබේ .config () ශ්‍රිතයට පිවිසිය හැකි එකම සේවාව සපයන්නන් වේ. ඔබේ සේවා වස්තුව ලබා දීමට පෙර මොඩියුලය පුරා වින්‍යාසය සැපයීමට අවශ්‍ය විට සැපයුම්කරුවෙකු භාවිතා කරන්න.

app.controller(‘myProvider’, function($scope, myProvider){
  $scope.artist = myProvider.getArtist();
  $scope.data.thingFromConfig = myProvider.thingOnConfig;
});

app.provider(‘myProvider’, function(){
 //Only the next two lines are available in the app.config()
 this._artist = ‘’;
 this.thingFromConfig = ‘’;
  this.$get = function(){
    var that = this;
    return {
      getArtist: function(){
        return that._artist;
      },
      thingOnConfig: that.thingFromConfig
    }
  }
});

app.config(function(myProviderProvider){
  myProviderProvider.thingFromConfig = ‘This was set in config’;
});

ටීඑල් නොවන; ඩී.ආර්

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 ය
• makeUrl යනු අපගේ අයිටියුන්ස් හිතකාමී URL නිර්මාණය කර නැවත ලබා දෙන ශ්‍රිතයකි.

දැන් අපගේ සහායක / පෞද්ගලික විචල්‍යයන් සහ ක්‍රියාකාරිත්වය ක්‍රියාත්මක වන බැවින්, අපි 'සේවා' වස්තුවට ගුණාංග කිහිපයක් එකතු කරමු. අප 'සේවාව' මත තබන ඕනෑම දෙයක් අප විසින් 'myFactory' පසු කරන ඕනෑම පාලකයක් තුළ කෙලින්ම භාවිතා කළ හැකිය.

අපි යන්නේ කලාකරුවා නැවත පැමිණීමට හෝ සැකසීමට setArtist සහ getArtist ක්‍රම නිර්මාණය කිරීමට ය. අපගේ නිර්මාණය කළ URL සමඟ අයිටියුන්ස් ඒපීඅයි යනුවෙන් හැඳින්වෙන ක්‍රමයක් ද අපි නිර්මාණය කිරීමට යන්නෙමු. මෙම ක්‍රමය මඟින් අයිටියුන්ස් ඒපීඅයි වෙතින් දත්ත නැවත පැමිණි පසු ඉටු වන පොරොන්දුවක් ලබා දෙනු ඇත. AngularJS හි පොරොන්දු භාවිතා කරමින් ඔබට එතරම් අත්දැකීම් නොමැති නම්, ඒවා පිළිබඳව ගැඹුරු කිමිදීමක් කිරීමට මම තරයේ නිර්දේශ කරමි.

SetArtist ට පහළින් කලාකරුවෙකු පිළිගෙන කලාකරුවා සැකසීමට ඔබට ඉඩ සලසයි. getArtist කලාකරුවා නැවත ලබා දෙයි. අපගේ $ http ඉල්ලීම සමඟ අප භාවිතා කරන URL එක තැනීම සඳහා callItunes මුලින්ම 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 below line creates an object(obj) 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;
}

දැන් ජාවාස්ක්‍රිප්ට් හි 'නව' මූල පදය සැබවින්ම කරන්නේ කුමක්ද යන්න පිළිබඳ දැනුමක් තිබීම, AngularJS හි සේවාවක් නිර්මාණය කිරීම තේරුම් ගැනීමට පහසු විය යුතුය.

සේවාවක් නිර්මාණය කිරීමේදී තේරුම් ගත යුතු ලොකුම දෙය නම්, 'නව' මූල පදය සමඟ සේවාවන් ක්ෂණිකව ක්‍රියාත්මක වන බව දැන ගැනීමයි. එම දැනුම ඉහත අපගේ උදාහරණ සමඟ සංයෝජනය කරමින්, ඔබ දැන් ඔබේ දේපල හා ක්‍රමවේදයන් 'මේ' වෙත කෙලින්ම අනුයුක්ත කරන බව හඳුනාගත යුතුය. මෙය ක්‍රියාවෙන් බලමු.

අප මුලින් කර්මාන්තශාලා උදාහරණයෙන් කළ දෙයට වඩා වෙනස්ව, අපට වස්තුවක් නිර්මාණය කිරීමට අවශ්‍ය නොවන අතර එම වස්තුව නැවත ලබා දෙන්න. මක්නිසාද යත්, කලින් සඳහන් කළ පරිදි, අපි 'නව' මූල පදය භාවිතා කළ නිසා පරිවර්තකයා එම වස්තුව නිර්මාණය කරනු ඇත. එය මූලාකෘතියකි, පසුව අප විසින් එම කාර්යය නොකර එය අප වෙනුවෙන් ආපසු එවන්න.

පළමුවෙන්ම පළමුව, අපගේ 'පුද්ගලික' සහ සහායක ක්‍රියාකාරිත්වය නිර්මාණය කරමු. අපගේ කර්මාන්ත ශාලාව සමඟ අප එකම දේ කළ බැවින් මෙය ඉතා හුරුපුරුදු විය යුතුය. එක් එක් පේළිය මෙහි කරන්නේ කුමක්දැයි මම පැහැදිලි නොකරමි, මන්ද මම එය කළේ කර්මාන්තශාලා උදාහරණයේ දී, ඔබ ව්‍යාකූල නම්, කර්මාන්තශාලා උදාහරණය නැවත කියවන්න.

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

මා කලින් සඳහන් කළාක් මෙන්, 'නව' කරන්නේ කුමක්දැයි ඔබ සැබවින්ම වටහා ගත් පසු, සේවාවන් AngularJS හි කර්මාන්තශාලාවලට බොහෝ දුරට සමාන වේ.

3) සැපයුම්කරු

සපයන්නන් ගැන මතක තබා ගත යුතු ලොකුම දෙය නම්, ඔබේ යෙදුමේ app.config කොටසට ඔබට පිවිසිය හැකි එකම සේවාව ඔවුන් වීමයි. ඔබගේ යෙදුමේ අනෙක් සෑම තැනකම ලබා ගැනීමට පෙර ඔබේ සේවා වස්තුවෙන් යම් කොටසක් වෙනස් කිරීමට ඔබට අවශ්‍ය නම් මෙය ඉතා වැදගත් වේ. සේවා / කර්මාන්තශාලා වලට බෙහෙවින් සමාන වුවත්, අපි සාකච්ඡා කරනු ලබන වෙනස්කම් කිහිපයක් තිබේ.

පළමුවෙන්ම අපි අපගේ සේවා සහ කර්මාන්තශාලාව සමඟ කළ ආකාරයටම අපගේ සැපයුම්කරු සකස් කළෙමු. පහත දැක්වෙන විචල්‍යයන් වන්නේ අපගේ 'පුද්ගලික' සහ සහායක ක්‍රියාකාරිත්වයයි.

app.provider('myProvider', function(){
   var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  //Going to set this property on the config function below.
  this.thingFromConfig = ‘’;

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }
}

* නැවතත් ඉහත කේතයේ කිසියම් කොටසක් අවුල් සහගත නම්, කර්මාන්තශාලා අංශය පරීක්ෂා කර බලන්න.

සැපයුම්කරුවන් කොටස් තුනක් ඇති බව ඔබට සිතිය හැකිය. පළමු කොටස 'පුද්ගලික' විචල්යයන් / කාර්යයන් පසුව වෙනස් කරනු ලැබේ / පසුව සකසනු ඇත (ඉහත පෙන්වා ඇත). දෙවන කොටස වන්නේ ඔබේ app.config ශ්‍රිතයේ ඇති විචල්‍යයන් / ශ්‍රිතයන් වන අතර එම නිසා ඒවා වෙනත් ඕනෑම තැනකට යාමට පෙර වෙනස් කිරීමට හැකිය (ඉහත පෙන්වා ඇත). එම විචල්‍යයන් 'මෙම' මූල පදයට අනුයුක්ත කළ යුතු බව සැලකිල්ලට ගැනීම වැදගත්ය. අපගේ උදාහරණයේ දී, app.config හි වෙනස් කිරීමට ඇත්තේ 'thingFromConfig' පමණි. තෙවන කොටස (පහත පෙන්වා ඇත) ඔබ 'myProvider' සේවාව තුළ එම නිශ්චිත පාලකයට ඇතුළු වන විට ඔබේ පාලකයේ ඇති සියලුම විචල්‍යයන් / කාර්යයන් වේ.

සැපයුම්කරු සමඟ සේවාවක් නිර්මාණය කිරීමේදී, ඔබේ පාලකයේ ඇති එකම ගුණාංග / ක්‍රම $ get () ශ්‍රිතයෙන් ආපසු ලබා දෙන ගුණාංග / ක්‍රම වේ. පහත කේතය මඟින් 'මෙය' ලබා ගන්න (අවසානයේදී එම ශ්‍රිතයෙන් ආපසු ලැබෙනු ඇතැයි අපි දනිමු). දැන්, එම function ලබා ගැනීමේ ශ්‍රිතය අපට පාලකයේ ලබා ගැනීමට අවශ්‍ය සියලුම ක්‍රම / ගුණාංග ලබා දෙයි. මෙන්න කේත උදාහරණයක්.

this.$get = function($http, $q){
    return {
      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: function(artist){
        _artist = artist;
      },
      getArtist: function(){
        return _artist;
      },
      thingOnConfig: this.thingFromConfig
    }
  }

දැන් සම්පූර්ණ සැපයුම්කරු කේතය මේ වගේ ය

app.provider('myProvider', function(){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  //Going to set this property on the config function below
  this.thingFromConfig = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  this.$get = function($http, $q){
    return {
      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: function(artist){
        _artist = artist;
      },
      getArtist: function(){
        return _artist;
      },
      thingOnConfig: this.thingFromConfig
    }
  }
});

දැන් අපගේ කර්මාන්තශාලාවේ සහ සේවාවේදී මෙන්, අපි මගේ ප්‍රොවයිඩරය තුළට ඇතුළු වන ඕනෑම පාලකයකින් setArtist, getArtist සහ callItunes ලබා ගත හැකිය. මෙන්න myProvider පාලකය (එය අපගේ කර්මාන්තශාලා / සේවා පාලකයට සමාන වේ).

app.controller('myProviderCtrl', function($scope, myProvider){
  $scope.data = {};
  $scope.updateArtist = function(){
    myProvider.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myProvider.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }

  $scope.data.thingFromConfig = myProvider.thingOnConfig;
});

කලින් සඳහන් කළ පරිදි, සැපයුම්කරු සමඟ සේවාවක් නිර්මාණය කිරීමේ සමස්ත ලක්ෂ්‍යය වන්නේ අවසාන වස්තුව යෙදුමේ ඉතිරි කොටස වෙත යැවීමට පෙර app.config ශ්‍රිතය හරහා සමහර විචල්‍යයන් වෙනස් කිරීමට හැකි වීමයි. ඒ සඳහා උදාහරණයක් බලමු.

app.config(function(myProviderProvider){
  //Providers are the only service you can pass into app.config
  myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});

අපගේ සැපයුම්කරු තුළ 'thingFromConfig' හිස් නූලක් වන්නේ කෙසේදැයි දැන් ඔබට දැක ගත හැකිය, නමුත් එය DOM හි පෙන්වන විට, එය 'මෙම වාක්‍යය සකසා ඇත ...' වනු ඇත.

සියලුම සේවාවන් තනි බොත්තම් ය ; ඔවුන් එක් යෙදුමකට එක් වරක් ක්ෂණිකව ලබා ගනී. ඒවා ඕනෑම වර්ගයක විය හැකිය, එය ප්‍රාථමික, වස්තු වචනාර්ථය, ශ්‍රිතය හෝ අභිරුචි වර්ගයක අවස්ථාවක් විය හැකිය.

මෙම value, factory, service, constant, හා providerක්රම සියලු සපයන්නන් වේ. සේවාවන් ක්ෂණිකව ක්‍රියාත්මක කරන්නේ කෙසේදැයි ඔවුන් ඉන්ජෙක්ටරයට උගන්වයි.

වඩාත්ම වාචික, නමුත් වඩාත් සවිස්තරාත්මක වන්නේ සැපයුම්කරුගේ වට්ටෝරුවකි. මෙම ඉතිරි හතර වට්ටෝරුව වර්ග - අගය, කර්මාන්ත ශාලාව, සේවා හා ස්ථාවර - සැපයීමේ වට්ටෝරුව මත පමණක් සින්ටැක්ටික් සීනි වේ .

• මෙම අගය Recipe ඔබ සේවා ඔබම instantiate සහ ලබා ගත හැකි සරල නඩුව වේ instantiated අගය වන ඉන්ෙජක්ටරය කිරීමට.
• මෙම කර්මාන්ත ශාලාව වට්ටෝරුව ද ඉන්ෙජක්ටරය එය සේවය instantiate කිරීමට අවශ්ය විට එය ඉල්ලා සිටී කර්මාන්ත ශාලාවක කාර්යය ලබා දෙයි. කැඳවූ විට, කර්මාන්තශාලාවේ ක්‍රියාකාරිත්වය මඟින් සේවා අවස්ථාව නිර්මාණය කර ආපසු ලබා දේ. සේවාවේ පරායත්තතාවයන් ශ්‍රිතවල තර්ක ලෙස එන්නත් කරනු ලැබේ. එබැවින් මෙම වට්ටෝරුව භාවිතා කිරීමෙන් පහත සඳහන් හැකියාවන් එකතු වේ:
  • වෙනත් සේවාවන් භාවිතා කිරීමේ හැකියාව (පරායත්තතා ඇත)
  • සේවා ආරම්භ කිරීම
  • ප්‍රමාද / කම්මැලි ආරම්භය
• මෙම සේවාව වට්ටෝරුව කර්මාන්තශාලාවේ වට්ටෝරුව වාගේ ම ය, නමුත් මෙහි ඉන්ෙජක්ටරය වූ අල්ලාහ් ඉදිකිරීමටත් ඒ වෙනුවට කර්මාන්ත ශාලාවක කාර්යය නව ක්රියාකරු සමග.
• මෙම සපයන්නා වට්ටෝරුව සාමාන්යයෙන් overkill . කර්මාන්තශාලාව නිර්මාණය කිරීම වින්‍යාස කිරීමට ඔබට ඉඩ දීමෙන් එය තවත් එක් ස්ථරයක් එකතු කරයි.

  ඔබ සැපයුම්කරුගේ වට්ටෝරුව භාවිතා කළ යුත්තේ යෙදුම ආරම්භ වීමට පෙර කළ යුතු පුළුල් පරාසයක වින්‍යාසය සඳහා API එකක් නිරාවරණය කිරීමට ඔබට අවශ්‍ය වූ විට පමණි. මෙය සාමාන්‍යයෙන් සිත්ගන්නා සුළු වන්නේ නැවත භාවිතා කළ හැකි සේවාවන් සඳහා වන අතර ඒවායේ හැසිරීම යෙදුම් අතර තරමක් වෙනස් විය යුතුය.

• මෙම ස්ථාවර වට්ටෝරුව ඒක තුළ ලබා ගත හැකි බව සේවා නිර්වචනය කිරීමට ඔබට ඉඩ හැර අගය වට්ටෝරුව වගේ config අදියර. අගය වට්ටෝරුව භාවිතයෙන් සාදන ලද සේවාවන්ට වඩා ඉක්මනින්. සාරධර්ම මෙන් නොව, ඒවා භාවිතයෙන් අලංකාර කළ නොහැක decorator.

AngularJS කර්මාන්ත ශාලාව, සේවා සහ සැපයුම්කරු අවබෝධ කර ගැනීම

නැවත භාවිතා කළ හැකි තනි වස්තු බෙදා ගැනීමට මේ සියල්ල භාවිතා කරයි. ඔබගේ යෙදුම / විවිධ සංරචක / මොඩියුල හරහා නැවත භාවිතා කළ හැකි කේතය බෙදා ගැනීමට එය උපකාරී වේ.

ඩොක්ස් සේවාවෙන් / කර්මාන්ත ශාලාවෙන් :

• කම්මැලි ලෙස ක්ෂණිකව - කෝණික සේවාවක් / කර්මාන්ත ශාලාවක් ස්ථාපනය කරන්නේ යෙදුම් අංගයක් මත රඳා පවතින විට පමණි.
• සිංගල්ටන් - සේවාවක් මත යැපෙන සෑම සංරචකයක්ම සේවා කර්මාන්ත ශාලාව විසින් ජනනය කරන ලද තනි අවස්ථාවකට යොමු කිරීමක් ලබා ගනී.

කර්මාන්ත ශාලාව

කර්මාන්තශාලාවක් යනු වස්තුවක් නිර්මාණය කිරීමට පෙර ඔබට තර්කනය හැසිරවීමට / එකතු කිරීමට හැකි වන අතර පසුව අලුතින් සාදන ලද වස්තුව නැවත ලැබෙනු ඇත.

app.factory('MyFactory', function() {
    var serviceObj = {};
    //creating an object with methods/functions or variables
    serviceObj.myFunction = function() {
        //TO DO:
    };
    //return that object
    return serviceObj;
});

භාවිතය

එය පංතියක් වැනි ශ්‍රිත එකතුවක් විය හැකිය. එමනිසා, ඔබ එය ඔබේ පාලක / කර්මාන්තශාලා / විධානයන් තුළ එන්නත් කරන විට විවිධ පාලකයන් තුළ එය ක්ෂණිකව දැක්විය හැකිය. එය ක්ෂණිකව ක්‍රියාත්මක වන්නේ එක් යෙදුමකට එක් වරක් පමණි.

සේවා

සේවාවන් දෙස බලන විට අරාව මූලාකෘතිය ගැන සිතන්න. සේවාවක් යනු 'නව' මූල පදය භාවිතයෙන් නව වස්තුවක් ක්ෂණිකව ක්‍රියාත්මක කරන ශ්‍රිතයකි. thisමූල පදය භාවිතා කිරීමෙන් ඔබට සේවා වස්තුවකට ගුණාංග සහ කාර්යයන් එක් කළ හැකිය . කර්මාන්ත ශාලාවක් මෙන් නොව, එය කිසිවක් ආපසු ලබා නොදේ (එය ක්‍රම / ගුණාංග අඩංගු වස්තුවක් ආපසු ලබා දෙයි).

app.service('MyService', function() {
    //directly binding events to this context
    this.myServiceFunction = function() {
        //TO DO:
    };
});

භාවිතය

යෙදුම පුරා ඔබට තනි වස්තුවක් බෙදා ගැනීමට අවශ්‍ය විට එය භාවිතා කරන්න. උදාහරණයක් ලෙස, සත්‍යාපිත පරිශීලක තොරතුරු, බෙදාගත හැකි ක්‍රම / දත්ත, උපයෝගිතා කාර්යයන් ආදිය.

සපයන්නා

වින්‍යාසගත කළ හැකි සේවා වස්තුවක් නිර්මාණය කිරීම සඳහා සැපයුම්කරුවෙකු භාවිතා කරයි. වින්‍යාස ශ්‍රිතයෙන් ඔබට සේවා සැකසුම වින්‍යාසගත කළ හැකිය. එය $get()ශ්‍රිතය භාවිතා කිරීමෙන් අගයක් ලබා දෙයි . මෙම $getකාර්යය කෝණික දී ලකුණු අදියරේ ක්රියාත්මක වී යයි.

app.provider('configurableService', function() {
    var name = '';
    //this method can be be available at configuration time inside app.config.
    this.setName = function(newName) {
        name = newName;
    };
    this.$get = function() {
        var getName = function() {
             return name;
        };
        return {
            getName: getName //exposed object to where it gets injected.
        };
    };
});

භාවිතය

ඔබේ සේවා වස්තුව ලබා දීමට පෙර මොඩියුලය අනුව වින්‍යාසය සැපයීමට ඔබට අවශ්‍ය වූ විට, උදා. ඔබ වැනි ඔබගේ පරිසර පදනම මත ඔබේ API ලිපිනය සකස් කිරීමට අවශ්ය සිතමු dev, stageහෝprod

සටහන

සේවා සහ කර්මාන්තශාලා නොමැති අතර කෝණික වින්‍යාස අවධියේදී සැපයුම්කරු පමණක් ලබා ගත හැකිය.

මෙය කර්මාන්තශාලා, සේවා සහ සැපයුම්කරු පිළිබඳ ඔබේ අවබෝධය ඉවත් කර ඇතැයි සිතමු .

මට නම්, හෙළිදරව්ව සිදු වූයේ ඔවුන් සියල්ලන්ම එකම ආකාරයකින් ක්‍රියා කරන බව මට වැටහුණු විට ය: යමක් වරක් ධාවනය කිරීමෙන් , ඔවුන්ට ලැබෙන වටිනාකම ගබඩා කිරීමෙන් සහ යැපුම් එන්නත් කිරීම මගින් යොමු කරන විට එම ගබඩා කළ අගයම කැස්සෙන් .

අපට ඇති බව පවසන්න:

app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);

තිදෙනා අතර වෙනස එයයි:

1. aගබඩා කළ අගය ලැබෙන්නේ ධාවනයෙන් ය fn.
2. bගබඩා කළ අගය පැමිණෙන්නේ newing වලින් fn.
3. cගබඩා කළ අගය ලැබෙන්නේ මුලින්ම ඉංග්‍රීසි newභාෂාවෙන් උදාහරණයක් ලබා ගැනීමෙන් fnපසුව $getනිදර්ශන ක්‍රමයක් ක්‍රියාත්මක කිරීමෙනි.

එහි අර්ථය වන්නේ AngularJS තුළ හැඹිලි වස්තුවක් වැනි දෙයක් ඇති අතර, එක් එක් එන්නතෙහි වටිනාකම නියම කරනු ලබන්නේ එක් වරක් පමණි, ඒවා පළමු වරට එන්නත් කළ විට සහ කොහේද:

cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()

අපි thisසේවාවන්හි භාවිතා කරන්නේ මේ නිසාය , සහ this.$getසැපයුම්කරුවන් අර්ථ දක්වන්න .

සේවා එදිරිව සැපයුම්කරු එදිරිව කර්මාන්ත ශාලාව:

මම එය සරලව තබා ගැනීමට උත්සාහ කරමි. මේ සියල්ල මූලික ජාවාස්ක්‍රිප්ට් සංකල්පය ගැන ය.

පළමුවෙන්ම, AngularJS හි සේවාවන් ගැන කතා කරමු !

සේවාව යනු කුමක්ද: AngularJS හි, සේවාවයනු ප්‍රයෝජනවත් ක්‍රම හෝ ගුණාංග ගබඩා කළ හැකි තනි ජාවාස්ක්‍රිප්ට් වස්තුවකි. මෙම සිංගල්ටන් වස්තුව ngApp (කෝණික යෙදුම) පදනම මත නිර්මාණය කර ඇති අතර එය වත්මන් යෙදුම තුළ ඇති සියලුම පාලකයන් අතර බෙදා ගැනේ. Angularjs සේවා වස්තුවක් ස්ථාපනය කළ විට, එය මෙම සේවා වස්තුව අද්විතීය සේවා නාමයකින් ලියාපදිංචි කරයි. එබැවින් අපට සේවා අවස්ථා අවශ්‍ය සෑම අවස්ථාවකම, කෝණික මෙම සේවා නාමය සඳහා ලේඛකාධිකාරය සොයන්න, එවිට එය සේවා වස්තුව වෙත යොමු කරයි. සේවා වස්තුව මත අපට ක්‍රම, ප්‍රවේශ ගුණාංග ආදිය ඉල්ලා සිටිය හැකිය. පාලකයන්ගේ විෂය පථයට ගුණාංග, ක්‍රම ද තැබිය හැකිදැයි ඔබට ප්‍රශ්නයක් තිබිය හැකිය! ඉතින් ඔබට සේවා වස්තුව අවශ්‍ය වන්නේ ඇයි? පිළිතුරු: සේවාවන් බහු පාලක විෂය පථයන් අතර බෙදා ගැනේ. ඔබ යම් ගුණාංග / ක්‍රම පාලක විෂය පථයට දැමුවහොත් එය ලබා ගත හැක්කේ වත්මන් විෂය පථයට පමණි.

එබැවින් පාලක විෂය පථ තුනක් තිබේ නම්, එය පාලක ඒ, පාලක බී සහ පාලක සී වේවා, සියල්ලම එකම සේවා අවස්ථා බෙදා ගනී.

<div ng-controller='controllerA'>
    <!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
    <!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
    <!-- controllerC scope -->
</div>

සේවාවක් නිර්මාණය කරන්නේ කෙසේද?

AngularJS සේවාවක් ලියාපදිංචි කිරීම සඳහා විවිධ ක්‍රම සපයයි. මෙහිදී අපි කර්මාන්තශාලා (..), සේවා (..), සැපයුම්කරු (..) යන ක්‍රම තුන කෙරෙහි අවධානය යොමු කරමු.

කේත යොමු කිරීම සඳහා මෙම සබැඳිය භාවිතා කරන්න

කර්මාන්තශාලා ක්‍රියාකාරිත්වය:

කර්මාන්තශාලා ශ්‍රිතයක් අපට පහත පරිදි අර්ථ දැක්විය හැකිය.

factory('serviceName',function fnFactory(){ return serviceInstance;})

AngularJS විසින් 'කර්මාන්තශාලා (' serviceName ', fnFactory)' ක්‍රමය සපයන අතර එය පරාමිති දෙකක් වන serviceName සහ JavaScript ශ්‍රිතයක් ගනී. පහත දැක්වෙන පරිදි fnFactory () ශ්‍රිතය යෙදීමෙන් කෝණික සේවා අවස්ථා නිර්මාණය කරයි .

var serviceInstace = fnFactory();

සම්මත ශ්‍රිතයට වස්තුවක් අර්ථ දැක්විය හැකි අතර එම වස්තුව ආපසු ලබා දිය හැකිය. AngularJS හුදෙක් මෙම වස්තුව යොමු කිරීම පළමු තර්කය ලෙස සම්මත කරන විචල්‍යයකට ගබඩා කරයි. FnFactory වෙතින් ආපසු ලබා දෙන ඕනෑම දෙයක් serviceInstance වෙත බැඳී ඇත. වස්තුව ආපසු ලබා දෙනවා වෙනුවට, අපට ක්‍රියාකාරීත්වය, අගයන් යනාදිය නැවත ලබා දිය හැකිය. අප ආපසු එන්නේ කුමක් වුවත්, සේවා අවස්ථා සඳහා ලබා ගත හැකිය.

උදාහරණයක්:

var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
  var data={
    'firstName':'Tom',
    'lastName':' Cruise',
    greet: function(){
      console.log('hello!' + this.firstName + this.lastName);
    }
  };

  //Now all the properties and methods of data object will be available in our service object
  return data;
});

සේවා කාර්යය:

service('serviceName',function fnServiceConstructor(){})

එය තවත් ක්‍රමයක්, අපට සේවාවක් ලියාපදිංචි කළ හැකිය. එකම වෙනස වන්නේ සේවා වස්තුව ක්ෂණිකව කිරීමට AngularJS උත්සාහ කරන ආකාරයයි. මෙම අවස්ථාවේදී කෝණික 'නව' මූල පදය භාවිතා කරන අතර ඉදිකිරීම්කරුගේ ශ්‍රිතය පහත පරිදි අමතන්න.

var serviceInstance = new fnServiceConstructor();

ඉදිකිරීම්කරු ශ්‍රිතයේ දී අපට සේවා වස්තුවට ගුණාංග / ක්‍රම එකතු කිරීම සඳහා 'මෙම' මූල පදය භාවිතා කළ හැකිය. උදාහරණයක්:

//Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
  this.firstName ='James';
  this.lastName =' Bond';
  this.greet = function(){
    console.log('My Name is '+ this.firstName + this.lastName);
  };
});

සැපයුම්කරුගේ කාර්යය:

සේවා නිර්මාණය කිරීමේ තවත් ක්‍රමයක් වන්නේ සැපයුම්කරු () ශ්‍රිතයයි. පරිශීලකයාට සුබ පැතුම් පණිවිඩයක් පෙන්වන සේවාවක් නිර්මාණය කිරීමට අපි උනන්දු වෙමු. නමුත් පරිශීලකයාට ඔවුන්ගේ සුබ පැතුම් පණිවිඩයක් සැකසිය හැකි ක්‍රියාකාරීත්වයක් සැපයීමටද අපට අවශ්‍යය. තාක්ෂණික වශයෙන් අපට වින්‍යාසගත කළ හැකි සේවාවන් නිර්මාණය කිරීමට අවශ්‍යය. අපට මෙය කළ හැක්කේ කෙසේද? ක්‍රමයක් තිබිය යුතුය, එවිට යෙදුමට ඔවුන්ගේ අභිරුචි සුබ පැතුම් පණිවිඩ යැවිය හැකි අතර ඇන්ගුලාර්ජ් විසින් අපගේ සේවා අවස්ථා නිර්මාණය කරන කර්මාන්තශාලා / ඉදිකිරීම්කරුවන්ගේ ක්‍රියාකාරිත්වයට එය ලබා දෙනු ඇත. එවැනි අවස්ථාවකදී සැපයුම්කරුගේ () කාර්යය ඉටු කරයි. සැපයුම්කරු () ශ්‍රිතය භාවිතා කර අපට වින්‍යාසගත කළ හැකි සේවාවන් නිර්මාණය කළ හැකිය.

පහත දැක්වෙන පරිදි සැපයුම්කරුවන්ගේ සින්ටැක්ස් භාවිතයෙන් අපට වින්‍යාසගත කළ හැකි සේවාවන් නිර්මාණය කළ හැකිය.

/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});

/*step2:configure the service */
app.config(function configureService(serviceProvider){});

සැපයුම්කරුගේ සින්ටැක්ස් අභ්‍යන්තරව ක්‍රියා කරන්නේ කෙසේද?

1.ප්‍රොයිඩර් වස්තුව නිර්මාණය කර ඇත්තේ අපගේ සැපයුම්කරුගේ ශ්‍රිතය තුළ අප විසින් නිර්වචනය කර ඇති ඉදිකිරීම් ශ්‍රිතයෙනි.

var serviceProvider = new serviceProviderConstructor();

2. අපි app.config () හි සම්මත කළ කාර්යය ක්‍රියාත්මක කරන්න. මෙය වින්‍යාස අවධිය ලෙස හැඳින්වෙන අතර මෙහිදී අපගේ සේවාව රිසිකරණය කිරීමට අපට අවස්ථාවක් තිබේ.

configureService(serviceProvider);

3. අවසාන වශයෙන් සේවා අවස්ථාව නිර්මාණය වන්නේ service ලබා ගැනීමේ සේවා ක්‍රමය ඇමතීමෙනි.

serviceInstance = serviceProvider.$get()

සපයන සින්ටැක්ස් භාවිතයෙන් සේවාව නිර්මාණය කිරීම සඳහා නියැදි කේතය:

var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
  //this function works as constructor function for provider
  this.firstName = 'Arnold ';
  this.lastName = ' Schwarzenegger' ;
  this.greetMessage = ' Welcome, This is default Greeting Message' ;
  //adding some method which we can call in app.config() function
  this.setGreetMsg = function(msg){
    if(msg){
      this.greetMessage =  msg ;
    }
  };

  //We can also add a method which can change firstName and lastName
  this.$get = function(){
    var firstName = this.firstName;
    var lastName = this.lastName ;
    var greetMessage = this.greetMessage;
    var data={
       greet: function(){
         console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
       }
    };
    return data ;
  };
});

app.config(
  function(providerPatternProvider){
    providerPatternProvider.setGreetMsg(' How do you do ?');
  }
);

වැඩ කරන නිරූපණය

සාරාංශය:

කර්මාන්තශාලාවක් භාවිතා කරන්නේ කර්මාන්තශාලා ශ්‍රිතයක් වන අතර එය සේවා අවස්ථාවක් ලබා දෙයි. serviceInstance = fnFactory ();

සේවාව ඉදිකිරීම් ශ්‍රිතයක් භාවිතා කරන අතර සේවා අවස්ථාව නිර්මාණය කිරීම සඳහා කෝණික විසින් මෙම නවකතා ශ්‍රිතය 'නව' යතුරු පදයක් භාවිතා කරයි. serviceInstance = නව fnServiceConstructor ();

සැපයුම්කරු විසින් සැපයුම්කරුගේ නිර්වචනය අර්ථ දක්වයි, මෙම සැපයුම්කරුගේ ව්‍යුහය මඟින් කර්මාන්තශාලා ශ්‍රිතයක් ලබා ගනී . සේවා වස්තුව නිර්මාණය කිරීම සඳහා කෝණික ඇමතුම් $ get (). සේවා වස්තුව ක්ෂණික වීමට පෙර වින්‍යාස කිරීමේ අමතර වාසියක් සැපයුම් සින්ටැක්ස් සතුව ඇත. serviceInstance = $ ලබා ගන්න ();

මෙහි කිහිප දෙනෙකු විසින් නිවැරදිව පෙන්වා දී ඇති පරිදි කර්මාන්ත ශාලාවක්, සැපයුම්කරුවෙකු, සේවාවක් සහ වටිනාකම සහ නියතය පවා එකම දෙයක අනුවාදයන් වේ. ඔබට වඩාත් පොදු providerඒවා සියල්ලටම බෙදිය හැකිය. එසේ වැනි:

මෙන්න මේ පින්තූරයේ ලිපිය:

http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

කර්මාන්ත ශාලාව

ඔබ AngularJS හට ශ්‍රිතයක් ලබා දෙයි, කර්මාන්තශාලාව ඉල්ලා සිටින විට AngularJS විසින් හැඹිලි සහ ප්‍රතිලාභ අගය එන්නත් කරනු ඇත.

උදාහරණයක්:

app.factory('factory', function() {
    var name = '';
    // Return value **is** the object that will be injected
    return {
        name: name;
    }
})

භාවිතය:

app.controller('ctrl', function($scope, factory) {
     $scope.name = factory.name;
});

සේවා

ඔබ AngularJS හට ශ්‍රිතයක් ලබා දෙයි, එය ක්ෂණිකව ක්‍රියාත්මක කිරීම සඳහා AngularJS නව ඇමතුමක් ලබා දෙනු ඇත . සේවාව ඉල්ලූ විට එය හැඹිලි සහ එන්නත් කරනු ලබන AngularJS නිර්මාණය කරන අවස්ථාවයි. නව සිට සේවා instantiate කිරීම සඳහා භාවිතා කරන ලදී, මට උබව මෙම වලංගු වන අතර, උදාහරණයක් සඳහන් කරයි.

උදාහරණයක්:

app.service('service', function() {
     var name = '';
     this.setName = function(newName) {
         name = newName;
     }
     this.getName = function() {
         return name;
     }
});

භාවිතය:

app.controller('ctrl', function($scope, service) {
   $scope.name = service.getName();
});

සපයන්නා

ඔබ AngularJS හට ශ්‍රිතයක් ලබා දෙන අතර AngularJS එහි $getක්‍රියාකාරිත්වය අමතනු ඇත . එය ප්‍රතිලාභ අගය වේ$getසේවාව ඉල්ලා සිටින විට එය හැඹිලි සහ එන්නත් කරනු ලබන ශ්‍රිතයෙන් .

AngularJS ඇමතීමට පෙර සැපයුම්කරු වින්‍යාස කිරීමට සැපයුම්කරුවන් ඔබට ඉඩ දෙයි$getඑන්නත් ලබා ගැනීම සඳහා ක්‍රමය .

උදාහරණයක්:

app.provider('provider', function() {
     var name = '';
     this.setName = function(newName) {
          name = newName;
     }
     this.$get = function() {
         return {
            name: name
         }
     }
})

භාවිතය (පාලකයක එන්නත් කළ හැකි ලෙස)

app.controller('ctrl', function($scope, provider) {
    $scope.name = provider.name;
});

භාවිතය ( $getඑන්නත් කිරීමට පෙර සැපයුම්කරු වින්‍යාස කිරීම කැඳවනු ලැබේ)

app.config(function(providerProvider) {
    providerProvider.setName('John');
});

සැපයුම්කරුවන් සමඟ සෙල්ලම් කිරීමේදී සිත්ගන්නාසුලු දෙයක් මම දුටුවෙමි.

සේවා සහ කර්මාන්තශාලා වලට වඩා එන්නත් වල දෘශ්‍යතාව සැපයුම්කරුවන්ට වෙනස් වේ. ඔබ AngularJS “නියත” ලෙස ප්‍රකාශ කරන්නේ නම් (නිදසුනක් ලෙස myApp.constant('a', 'Robert');), ඔබට එය සේවා, කර්මාන්තශාලා සහ සැපයුම්කරුවන්ට එන්නත් කළ හැකිය.

නමුත් ඔබ AngularJS “අගයක්” ප්‍රකාශ කරන්නේ නම් (නිදසුනක් ලෙස, myApp.value('b', {name: 'Jones'});), ඔබට එය සේවා සහ කර්මාන්තශාලාවලට එන්නත් කළ හැකිය, නමුත් සැපයුම්කරු නිර්මාණය කිරීමේ කාර්යයට නොවේ. කෙසේ වෙතත්, $getඔබේ සැපයුම්කරු සඳහා ඔබ අර්ථ දක්වන ශ්‍රිතයට එය එන්නත් කළ හැකිය . මෙය AngularJS ප්‍රලේඛනයේ සඳහන් නමුත් එය මඟ හැරීම පහසුය. වටිනාකම සහ නියත ක්‍රම පිළිබඳ අංශවල% සපයන පිටුවෙන් ඔබට එය සොයාගත හැකිය.

http://jsfiddle.net/R2Frv/1/

<div ng-app="MyAppName">
    <div ng-controller="MyCtrl">
        <p>from Service: {{servGreet}}</p>
        <p>from Provider: {{provGreet}}</p>
    </div>
</div>
<script>
    var myApp = angular.module('MyAppName', []);

    myApp.constant('a', 'Robert');
    myApp.value('b', {name: 'Jones'});

    myApp.service('greetService', function(a,b) {
        this.greeter = 'Hi there, ' + a + ' ' + b.name;
    });

    myApp.provider('greetProvider', function(a) {
        this.firstName = a;
        this.$get = function(b) {
            this.lastName = b.name;
            this.fullName = this.firstName + ' ' + this.lastName;
            return this;
        };
    });

    function MyCtrl($scope, greetService, greetProvider) {
        $scope.servGreet = greetService.greeter;
        $scope.provGreet = greetProvider.fullName;
    }
</script>

මෙය නවක වදය සඳහා ඉතා ව්‍යාකූල කොටසක් වන අතර මම එය පහසු වචන වලින් පැහැදිලි කිරීමට උත්සාහ කර ඇත්තෙමි

AngularJS සේවාව: පාලකයේ සේවා යොමුව සමඟ උපයෝගිතා කාර්යයන් බෙදා ගැනීම සඳහා භාවිතා කරයි. සේවාව සොබාදහමේ තනි පුද්ගලයෙකි, එබැවින් එක් සේවාවක් සඳහා බ්‍රව්සරයේ එක් අවස්ථාවක් පමණක් නිර්මාණය වන අතර පිටුව පුරා එකම සඳහනක් භාවිතා වේ.

සේවාවේදී, අපි මෙම වස්තුව සමඟ දේපළ ලෙස ක්‍රියාකාරී නම් නිර්මාණය කරමු .

AngularJS කර්මාන්ත ශාලාව: කර්මාන්තශාලාවේ පරමාර්ථය සේවාව හා සමාන වේ. කෙසේ වෙතත් මේ අවස්ථාවේ දී අපි නව වස්තුවක් නිර්මාණය කර මෙම වස්තුවේ ගුණාංග ලෙස ශ්‍රිත එකතු කරන අතර අවසානයේ අපි මෙම වස්තුව ආපසු ලබා දෙමු.

AngularJS සැපයුම්කරු: මෙහි අරමුණ යළිත් සමාන වේ, කෙසේ වෙතත් සැපයුම්කරු එහි ප්‍රති get ල ලබා ගනී.

සේවාව, කර්මාන්තශාලාව සහ සැපයුම්කරු නිර්වචනය කිරීම සහ භාවිතා කිරීම http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider

මට වෙනස තේරුම් ගත හැකි හොඳම හා සරලම ක්‍රමය නම්:

var service, factory;
service = factory = function(injection) {}

AngularJS විශේෂිත සංරචක ස්ථාපනය කරන්නේ කෙසේද (සරල කරන ලද):

// service
var angularService = new service(injection);

// factory
var angularFactory = factory(injection);

එබැවින්, සේවාව සඳහා, AngularJS සංරචකය බවට පත්වන්නේ සේවා ප්‍රකාශන ශ්‍රිතය මගින් නිරූපණය වන පන්තියේ වස්තු අවස්ථාවයි. කර්මාන්තශාලාව සඳහා, එය කර්මාන්තශාලා ප්‍රකාශන ශ්‍රිතයෙන් ලැබෙන ප්‍රති result ලයකි. කර්මාන්තශාලාව සේවාවට සමාන ලෙස ක්‍රියා කළ හැකිය:

var factoryAsService = function(injection) {
  return new function(injection) {
    // Service content
  }
}

සිතීමේ සරලම ක්‍රමය පහත දැක්වේ:

• සේවාව යනු තනි වස්තු වස්තුවකි. ඔබේ කේතය සඳහා සිංගල්ටන් වස්තුවක් සැපයීමට අවශ්‍ය නම් සේවාවන් භාවිතා කරන්න.
• කර්මාන්ත ශාලාව යනු පන්තියකි. ඔබේ කේතය සඳහා අභිරුචි පන්ති සැපයීමට අවශ්‍ය නම් කර්මාන්තශාලා භාවිතා කරන්න (සේවාවන් දැනටමත් ක්ෂණිකව ක්‍රියාත්මක කර ඇති නිසා ඒවා කළ නොහැක).

කර්මාන්තශාලාවේ 'පන්තියේ' උදාහරණය අවට ඇති අදහස් මෙන්ම සැපයුම්කරුගේ වෙනස ද සපයයි.

මේ කාරණය පිළිබඳ මගේ පැහැදිලි කිරීම:

මූලික වශයෙන් සඳහන් කළ සියලුම වර්ග (සේවා, කර්මාන්තශාලා, සැපයුම්කරු, ආදිය) පැරණි විලාසිතාවේ ගෝලීය විචල්‍යයන් මෙන් ගෝලීය විචල්‍යයන් (ඇත්ත වශයෙන්ම සමස්ත යෙදුමටම ගෝලීය වේ) නිර්මාණය කිරීම සහ වින්‍යාස කිරීම ය.

ගෝලීය විචල්‍යයන් නිර්දේශ කර නොමැති අතර, මෙම ගෝලීය විචල්‍යයන්ගේ සැබෑ භාවිතය වන්නේ විචල්‍යය අදාළ පාලකය වෙත යැවීමෙන් යැපුම් එන්නත් කිරීමයි.

"ගෝලීය විචල්යයන්" සඳහා අගයන් නිර්මාණය කිරීමේදී බොහෝ මට්ටම්වල සංකූලතා ඇත:

1. නියත
   මෙය වෙනත් යෙදුමක නියතයන් මෙන් (ජාවාස්ක්‍රිප්ට් නොමැති දෙයක්) සමස්ත යෙදුම තුළම වෙනස් නොකළ යුතු නියත නියතයක් අර්ථ දක්වයි.
   
2. වටිනාකම
   මෙය වෙනස් කළ හැකි අගයක් හෝ වස්තුවක් වන අතර එය වෙනත් ගෝලීය විචල්‍යයක් ලෙස සේවය කරයි, එය වෙනත් සේවාවන් හෝ කර්මාන්තශාලා නිර්මාණය කිරීමේදී පවා එන්නත් කළ හැකිය (මේවා පිළිබඳ වැඩිදුර බලන්න). කෙසේ වෙතත්, එය " වචනානුසාරී අගයක් " විය යුතුය , එයින් අදහස් කරන්නේ යමෙකුට සත්‍ය වටිනාකම ලිවිය යුතු අතර කිසිදු ගණනය කිරීමක් හෝ ක්‍රමලේඛන තර්කනයක් භාවිතා කළ නොහැකි බවයි (වෙනත් වචන වලින් කිවහොත් 39 හෝ myText හෝ {prop: "value" OK හරි, නමුත් 2 +2 නොවේ).
3. කර්මාන්තශාලාව
   වඩාත් පොදු අගයක්, එය වහාම ගණනය කළ හැකිය. අගය ගණනය කිරීමට අවශ්‍ය තර්කනය සමඟ AngularJS වෙත ශ්‍රිතයක් යැවීමෙන් එය ක්‍රියාත්මක වන අතර AngularJS එය ක්‍රියාත්මක කරන අතර එය නම් කරන ලද විචල්‍යයේ ප්‍රතිලාභ අගය ඉතිරි කරයි.
   වස්තුවක් ආපසු ලබා දිය හැකි බව සලකන්න (එම අවස්ථාවේ දී එය සේවාවකට සමාන ලෙස ක්‍රියා කරයි ) හෝ ශ්‍රිතයක් (එය විචල්‍යයේ ඇමතුම් ආපසු ගැනීමේ ශ්‍රිතයක් ලෙස සුරකිනු ඇත).
4. සේවා
   ඒ සේවය වඩාත් හෙලුවැලි අනුවාදය වේ කම්හල වලංගු වන වටිනාකම වස්තුවක් විට පමණක්, සහ එය (එය ඉදිකිරීමටත් වනු ඇත නම්) මෙම උත්සවයට කිරීමට ඕනෑම තර්ක ලියන, මෙන්ම ප්රකාශ හා ප්රවේශ වීම සඳහා, ඉඩ මෙම මූල පදය භාවිතා කරන වස්තු ගුණාංග .
5. සැපයුම්කරු කර්මාන්තශාලාවේ
   සරල කළ අනුවාදයක් වන සේවාවක් මෙන් නොව , සැපයුම්කරුවෙකු යනු “ගෝලීය” විචල්‍යයන් ආරම්භ කිරීමේ වඩාත් සංකීර්ණ, නමුත් නම්‍යශීලී ක්‍රමයක් වන අතර විශාලතම නම්‍යතාවය වන්නේ app.config වෙතින් අගයන් සැකසීමේ විකල්පයයි. එය ක්‍රියාත්මක වන්නේ සේවා සහ සැපයුම්කරුවන්ගේ සංයෝජනයක් භාවිතා කිරීමෙනි, මෙම මූල පදය භාවිතයෙන් ප්‍රකාශිත ගුණාංග ඇති ශ්‍රිතයක් සැපයුම්කරු වෙත යැවීමෙන් , එය භාවිතා කළ හැකිය . එවිට එයට වෙනම $ .get ශ්‍රිතයක් තිබිය යුතු අතර එය ඉහත ගුණාංග ගොනුව හරහා සැකසීමෙන් පසු AngularJS විසින් ක්‍රියාත්මක කරනු ලබන අතර මෙම $ .get ශ්‍රිතය කර්මාන්ත ශාලාව මෙන් ක්‍රියා කරයි
   app.config
app.config ඉහත, එහි ප්‍රතිලාභ අගය "ගෝලීය" විචල්‍යයන් ආරම්භ කිරීම සඳහා යොදා ගනී.

මගේ අවබෝධය පහතින් ඉතා සරල ය.

කර්මාන්තශාලාව: ඔබ කර්මාන්ත ශාලාව තුළ වස්තුවක් සාදා එය ආපසු ලබා දෙන්න.

සේවා:

ශ්‍රිතයක් අර්ථ දැක්වීම සඳහා මෙම මූල පදය භාවිතා කරන සම්මත ශ්‍රිතයක් ඔබ සතුව ඇත.

සපයන්නා:

$getඔබ අර්ථ දක්වන වස්තුවක් ඇති අතර එය දත්ත ලබා දෙන වස්තුව ලබා ගැනීමට භාවිතා කළ හැකිය.

කෝණික ලියකියවිලි වල සාරාංශය :

• වස්තු නිර්මාණය කරන්නේ කෙසේද යන්න නිර්වචනය කරන වට්ටෝරු වර්ග පහක් ඇත: අගය , කර්මාන්තශාලාව , සේවා , සැපයුම්කරු සහ නිරන්තර .
• කර්මාන්තශාලාව සහ සේවාව බහුලව භාවිතා වන වට්ටෝරු වේ. ඔවුන් අතර ඇති එකම වෙනස වන්නේ සේවා වට්ටෝරුව අභිරුචි වර්ගයක වස්තූන් සඳහා වඩා හොඳින් ක්‍රියා කරන අතර කර්මාන්ත ශාලාවට ජාවාස්ක්‍රිප්ට් ප්‍රාථමික හා කාර්යයන් නිෂ්පාදනය කළ හැකිය.
• මෙම සපයන්නා වට්ටෝරුව හරය වට්ටෝරුව වර්ගය වන අතර අනෙකුත් සියලුම අය එය මත පමණක් සින්ටැක්ටික් සීනි වේ.
• සැපයුම්කරු යනු වඩාත් සංකීර්ණ වට්ටෝරු වර්ගයයි. ගෝලීය වින්‍යාසය අවශ්‍ය වන නැවත භාවිතා කළ හැකි කේතයක් ඔබ ගොඩනඟන්නේ නම් මිස ඔබට එය අවශ්‍ය නොවේ.

SO වෙතින් හොඳම පිළිතුරු:

https://stackoverflow.com/a/26924234/165673 (<- හොඳයි) https://stackoverflow.com/a/27263882/165673
https://stackoverflow.com/a/16566144/165673

සියලු හොඳ පිළිතුරු දැනටමත්. සේවා සහ කර්මාන්තශාලාව පිළිබඳ තවත් කරුණු කිහිපයක් එක් කිරීමට මම කැමතියි . සේවා / කර්මාන්තශාලා අතර වෙනස සමඟ. තවද කෙනෙකුට පහත සඳහන් ප්‍රශ්න තිබිය හැකිය:

1. මම සේවාවක් හෝ කර්මාන්ත ශාලාවක් භාවිතා කළ යුතුද? මොකක්ද වෙනස?
2. ඔවුන් එකම දේ කරනවාද?

සේවාව සහ කර්මාන්තශාලාව අතර වෙනස සමඟ ආරම්භ කරමු:

1. දෙකම සිංගල්ටන් ය : කෝණික මේවා පළමු වරට යැපීමක් ලෙස සොයාගත් විට, එය සේවා / කර්මාන්තශාලාවේ තනි අවස්ථාවක් නිර්මාණය කරයි. උදාහරණය නිර්මාණය කළ පසු, එකම අවස්ථාව සදහටම භාවිතා වේ.

2. හැසිරීමක් සමඟ වස්තුවක් ආකෘතිගත කිරීම සඳහා භාවිතා කළ හැකිය : ඔවුන් දෙදෙනාම ක්‍රම, අභ්‍යන්තර රාජ්‍ය විචල්‍යයන් සහ යනාදිය තිබිය හැකිය. ඔබ එම කේතය ලියන ආකාරය වෙනස් වුවද.

සේවාවන්:

සේවාවක් යනු ඉදිකිරීම්කරුවන්ගේ කාර්යයක් වන අතර කෝණික එය නව ඇමතීමෙන් ක්ෂණිකව ක්‍රියාත්මක කරයි yourServiceName(). මෙයින් අදහස් වන්නේ කරුණු කිහිපයක්.

1. කාර්යයන් සහ නිදර්ශන විචල්‍යයන් ගුණාංග වේ this.
2. ඔබට වටිනාකමක් ආපසු ලබා දීමට අවශ්‍ය නැත. කෝණික ඇමතුම් ලබා ගන්නා විට new yourServiceName(), thisඔබ එය මත තබා ඇති සියලු ගුණාංග සහිත වස්තුව එයට ලැබෙනු ඇත .

නියැදි උදාහරණය:

angular.service('MyService', function() {
  this.aServiceVariable = "Ved Prakash"
  this.aServiceMethod = function() {
    return //code
  };
});

කෝණික මෙම MyServiceසේවාව එය මත රඳා පවතින MyServiceපාලකයකට එන්නත් කළ විට, එම පාලකයට එය ක්‍රියාත්මක කළ හැකි ක්‍රියාකාරීත්වයක් ලැබෙනු ඇත, උදා: MyService.aServiceMethod ().

ප්‍රවේශම් වන්නthis :

ඉදිකරන ලද සේවාව වස්තුවක් බැවින්, එහි ඇති ක්‍රම ඒවා හැඳින්වූ විට මෙය යොමු කළ හැකිය:

angular.service('ScoreKeeper', function($http) {
  this.score = 0;

  this.getScore = function() {
    return this.score;
  };

  this.setScore = function(newScore) {
    this.score = newScore;
  };

  this.addOne = function() {
    this.score++;
  };
});

ScoreKeeper.setScoreපොරොන්දු දාමයකින් ඇමතීමට ඔබ පෙළඹෙනු ඇත , නිදසුනක් ලෙස ඔබ එය සේවාදායකයෙන් ලබා ගැනීමෙන් ලකුණු ආරම්භ කළේ නම්: $http.get('/score').then(ScoreKeeper.setScore).මෙහි ඇති කරදරය ScoreKeeper.setScoreනම් එය thisබැඳී ඇති nullඅතර ඔබට දෝෂ ලැබෙනු ඇත. වඩා හොඳ ක්‍රමය වනු ඇත $http.get('/score').then(ScoreKeeper.setScore.bind(ScoreKeeper)). ඔබ මෙය ඔබේ සේවා ක්‍රමවේදයන්හි භාවිතා කිරීමට තෝරා ගත්තත් නැතත්, ඔබ ඒවා අමතන්නේ කෙසේද යන්න ගැන සැලකිලිමත් වන්න.

සිට වටිනාකමක් ලබා දීමService :

ජාවාස්ක්රිප්ට් වැඩ ඉදිකරන්නන් ආකාරය නිසා, ඔබ සංකීර්ණ අගය නැවත නම් (i.e., an Object)වලින් constructorකාර්යය එම දුරකථන ඇමතුම වෙනුවට එය වස්තුව මේ අවස්ථාවේ ලැබෙනු ඇත.

මෙයින් අදහස් කරන්නේ ඔබට මූලික වශයෙන් කර්මාන්තශාලා උදාහරණය පහතින් පිටපත් කර අලවන්න, ප්‍රතිස්ථාපනය factoryකළ හැකි serviceඅතර එය ක්‍රියාත්මක වනු ඇත:

angular.service('MyService', function($http) {
  var api = {};

  api.aServiceMethod= function() {
    return $http.get('/users');
  };
  return api;
});

එබැවින් කෝණික නව MyService () සමඟ ඔබේ සේවාව ගොඩනඟන විට, එය MyService උදාහරණය වෙනුවට එම api වස්තුව ලබා ගනී.

ඕනෑම සංකීර්ණ අගයන් (වස්තු, ශ්‍රිත) සඳහා වන හැසිරීම මෙයයි, නමුත් ප්‍රාථමික වර්ග සඳහා නොවේ.

කර්මාන්තශාලා:

කර්මාන්තශාලාවක් යනු වටිනාකමක් ලබා දෙන පැරණි පැරණි කාර්යයකි. ප්‍රතිලාභ වටිනාකම යනු කර්මාන්ත ශාලාව මත රඳා පවතින දේවලට එන්නත් කිරීමයි. කෝණිකයේ සාමාන්‍ය කර්මාන්තශාලා රටාවක් නම්, ශ්‍රිතයක් සහිත වස්තුවක් ගුණාංග ලෙස ආපසු ලබා දීම ය:

angular.factory('MyFactory', function($http) {
  var api = {};

  api.aFactoryMethod= function() {
    return $http.get('/users');
  };

  return api;
});

කර්මාන්තශාලා යැපීම සඳහා එන්නත් කළ අගය කර්මාන්තශාලාවේ ප්‍රතිලාභ අගය වන අතර එය වස්තුවක් විය යුතු නැත. එය ශ්‍රිතයක් විය හැකිය

ඉහත ප්‍රශ්න 1 සහ 2 සඳහා පිළිතුරු:

බොහෝ දුරට, සෑම දෙයක් සඳහාම කර්මාන්තශාලා භාවිතා කරමින් සිටින්න. ඔවුන්ගේ හැසිරීම තේරුම් ගැනීමට පහසුය. වටිනාකමක් ආපසු ලබා දිය යුතුද නැද්ද යන්න පිළිබඳව තෝරා ගැනීමක් නොමැත, තවද, ඔබ වැරදි දෙයක් කළහොත් දෝෂ හඳුන්වා දිය නොහැක.

මම ඒවා යැපීම් ලෙස එන්නත් කිරීම ගැන කතා කරන විට මම ඔවුන්ව “සේවා” ලෙස හඳුන්වන්නෙමි.

සේවාව / කර්මාන්තශාලා හැසිරීම බෙහෙවින් සමාන වන අතර සමහර අය පවසන්නේ එක්කෝ හොඳයි කියාය. එය තරමක් සත්‍යයකි, නමුත් ජෝන් පැපාගේ විලාසිතාවේ මාර්ගෝපදේශයේ උපදෙස් අනුගමනය කිරීම හා කර්මාන්තශාලා සමඟ රැඳී සිටීම මට පහසුය. **

අතිරේක පැහැදිලි කිරීමක් නම්, කර්මාන්තශාලාවලට කාර්යයන් / ප්‍රාථමිකයන් නිර්මාණය කළ හැකි අතර සේවාවන්ට නොහැකි ය. එපොක්ස් මත පදනම් වූ මෙම jsFiddle බලන්න : http://jsfiddle.net/skeller88/PxdSP/1351/ .

කර්මාන්තශාලාව මඟින් ක්‍රියාත්මක කළ හැකි ශ්‍රිතයක් නැවත ලබා දෙයි:

myApp.factory('helloWorldFromFactory', function() {
  return function() {
    return "Hello, World!";
  };
});

කර්මාන්තශාලාවට ආයාචනා කළ හැකි ක්‍රමයක් සහිත වස්තුවක් ආපසු ලබා දිය හැකිය:

myApp.factory('helloWorldFromFactory', function() {
  return {
    sayHello: function() {
      return "Hello, World!";
    }
  };
});

සේවාව මඟින් ආයාචනා කළ හැකි ක්‍රමයක් සහිත වස්තුවක් ආපසු ලබා දෙයි:

myApp.service('helloWorldFromService', function() {
  this.sayHello = function() {
     return "Hello, World!";
  };
});

වැඩි විස්තර සඳහා, වෙනස පිළිබඳව මා ලියූ ලිපියක් බලන්න: http://www.shanemkeller.com/tldr-services-vs-factories-in-angular/

දැනටමත් හොඳ පිළිතුරු ඇත, නමුත් මට මෙය බෙදා ගැනීමට අවශ්‍යයි.

පළමුවෙන්ම: සපයන්නා යනු නිර්මාණය කිරීමේ ක්‍රමය / වට්ටෝරුවයිservice (ඉන්ජෙක්ටර්) එන්නත් කළ යුතු යැයි සිතන (සිංගල්ටන් වස්තුවක්) (ඇන්ගුලා ජේඑස් අයිඕසී රටාව ගැන කතා කරන්නේ කෙසේද).

සහ වටිනාකම, කර්මාන්තශාලාව, සේවාව සහ නියත (ක්‍රම 4) - සැපයුම්කරුගේ මාර්ගය / රිසිට්පතට වඩා සින්ටැක්ටික් සීනි .

ඇත Service vs Factory: කොටසක් ආවරණය කර ඇත https://www.youtube.com/watch?v=BLzNCkPn3ao

සේවාව යනු newමූලික වචන 4 ක් වන අතර එය අප දන්නා පරිදි කරුණු 4 ක් කරයි:

1. අලුත්ම වස්තුවක් නිර්මාණය කරයි
2. එය එහි prototypeවස්තුවට සම්බන්ධ කරයි
3. වෙත සම්බන්ධ contextවේthis
4. සහ ආපසු this

හා කර්මාන්තශාලා කර්මාන්ත ශාලාව රටාව ගැන සියලු වේ - නැවත බව සේවා වැනි වස්තූන් ක්රියාත්මක වන බව අඩංගු වේ.

1. වෙනත් සේවාවන් භාවිතා කිරීමේ හැකියාව (පරායත්තතා ඇත)
2. සේවා ආරම්භ කිරීම
3. ප්‍රමාද / කම්මැලි ආරම්භය

මෙම සරල / කෙටි වීඩියෝව: ආවරණ ද සපයන්නා : https://www.youtube.com/watch?v=HvTZbQ_hUZY (එහිදී ඔවුන් කර්මාන්ත ශාලාවේ සිට සැපයුම්කරු වෙත යන්නේ කෙසේදැයි ඔබට දැකගත හැකිය)

යෙදුම සම්පුර්ණයෙන්ම ආරම්භ කිරීමට / ආරම්භ කිරීමට පෙර සැපයුම්කරුගේ වට්ටෝරුව බොහෝ විට යෙදුම් වින්‍යාසය තුළ භාවිතා වේ.

මේ සියලු පෝස්ට් කියවීමෙන් පසු එය මට වඩාත් ව්‍යාකූලත්වයක් ඇති කළේය .. නමුත් තවමත් සියල්ල ප්‍රයෝජනවත් තොරතුරු වේ .. අවසාන වශයෙන් පහත වගුව මට හමු විය.

• ඉන්ජෙක්ටර් විසින් වස්තු වර්ග දෙකක් නිර්මාණය කිරීම සඳහා වට්ටෝරු භාවිතා කරයි: සේවා සහ විශේෂ අරමුණු වස්තු
• වස්තු නිර්මාණය කරන්නේ කෙසේද යන්න නිර්වචනය කරන වට්ටෝරු වර්ග පහක් ඇත: අගය, කර්මාන්තශාලාව, සේවා, සැපයුම්කරු සහ නිරන්තර.
• කර්මාන්තශාලාව සහ සේවාව බහුලව භාවිතා වන වට්ටෝරු වේ. ඔවුන් අතර ඇති එකම වෙනස වන්නේ සේවා වට්ටෝරුව අභිරුචි වර්ගයක වස්තූන් සඳහා වඩා හොඳින් ක්‍රියා කරන අතර කර්මාන්ත ශාලාවට ජාවාස්ක්‍රිප්ට් ප්‍රාථමික හා කාර්යයන් නිෂ්පාදනය කළ හැකිය.
• සැපයුම්කරුගේ වට්ටෝරුව මූලික වට්ටෝරු වර්ගය වන අතර අනෙක් සියල්ලම එය මත සින්ටැක්ටික් සීනි පමණි.
• සැපයුම්කරු යනු වඩාත් සංකීර්ණ වට්ටෝරු වර්ගයයි. ගෝලීය වින්‍යාසය අවශ්‍ය වන නැවත භාවිතා කළ හැකි කේතයක් ඔබ ගොඩනඟන්නේ නම් මිස ඔබට එය අවශ්‍ය නොවේ.
• පාලකය හැර සෙසු විශේෂ අරමුණු වස්තු කර්මාන්තශාලා වට්ටෝරු හරහා අර්ථ දක්වා ඇත.

ආරම්භකයාට තේරුම් ගැනීම සඳහා: - මෙය භාවිතයේ අවස්ථාව නිවැරදි නොවිය හැකි නමුත් ඉහළ මට්ටමේ දී මෙම තිදෙනා සඳහා භාවිතා කරන කේතය මෙයයි.

1. ඔබට කෝණික මොඩියුලයේ භාවිතා කිරීමට අවශ්‍ය නම් වින්‍යාස ශ්‍රිතය සැපයුම්කරු ලෙස නිර්මාණය කළ යුතුය

angular.module('myApp').config(function($testProvider){
$testProvider.someFunction();
})

2. අජැක්ස් ඇමතුම හෝ තෙවන පාර්ශවීය ඒකාබද්ධ කිරීම් සේවාව විය යුතුය .
3. දත්ත හැසිරවීම් සඳහා එය කර්මාන්තශාලාවක් ලෙස නිර්මාණය කරයි

මූලික අවස්ථා සඳහා කර්මාන්තශාලාව සහ සේවාව එක හා සමානව ක්‍රියා කරයි.

මෙන්න AngularjS හි වස්තු කර්මාන්තශාලාව සඳහා කේත-අච්චුවක් ලෙස මා ඉදිරිපත් කළ බ්‍රොයිලර් ප්ලේට් කේත කිහිපයක්. නිදර්ශනය කිරීම සඳහා මම උදාහරණයක් ලෙස කාර් / කාර්ෆැක්ටරි භාවිතා කර ඇත්තෙමි. පාලකයේ සරල ක්‍රියාත්මක කිරීමේ කේතයක් සාදයි.

     <script>
        angular.module('app', [])
            .factory('CarFactory', function() {

                /**
                 * BroilerPlate Object Instance Factory Definition / Example
                 */
                this.Car = function() {

                    // initialize instance properties
                    angular.extend(this, {
                        color           : null,
                        numberOfDoors   : null,
                        hasFancyRadio   : null,
                        hasLeatherSeats : null
                    });

                    // generic setter (with optional default value)
                    this.set = function(key, value, defaultValue, allowUndefined) {

                        // by default,
                        if (typeof allowUndefined === 'undefined') {
                            // we don't allow setter to accept "undefined" as a value
                            allowUndefined = false;
                        }
                        // if we do not allow undefined values, and..
                        if (!allowUndefined) {
                            // if an undefined value was passed in
                            if (value === undefined) {
                                // and a default value was specified
                                if (defaultValue !== undefined) {
                                    // use the specified default value
                                    value = defaultValue;
                                } else {
                                    // otherwise use the class.prototype.defaults value
                                    value = this.defaults[key];
                                } // end if/else
                            } // end if
                        } // end if

                        // update 
                        this[key] = value;

                        // return reference to this object (fluent)
                        return this;

                    }; // end this.set()

                }; // end this.Car class definition

                // instance properties default values
                this.Car.prototype.defaults = {
                    color: 'yellow',
                    numberOfDoors: 2,
                    hasLeatherSeats: null,
                    hasFancyRadio: false
                };

                // instance factory method / constructor
                this.Car.prototype.instance = function(params) {
                    return new 
                        this.constructor()
                                .set('color',           params.color)
                                .set('numberOfDoors',   params.numberOfDoors)
                                .set('hasFancyRadio',   params.hasFancyRadio)
                                .set('hasLeatherSeats', params.hasLeatherSeats)
                    ;
                };

                return new this.Car();

            }) // end Factory Definition
            .controller('testCtrl', function($scope, CarFactory) {

                window.testCtrl = $scope;

                // first car, is red, uses class default for:
                // numberOfDoors, and hasLeatherSeats
                $scope.car1     = CarFactory
                                    .instance({
                                        color: 'red'
                                    })
                                ;

                // second car, is blue, has 3 doors, 
                // uses class default for hasLeatherSeats
                $scope.car2     = CarFactory
                                    .instance({
                                        color: 'blue',
                                        numberOfDoors: 3
                                    })
                                ;
                // third car, has 4 doors, uses class default for 
                // color and hasLeatherSeats
                $scope.car3     = CarFactory
                                    .instance({
                                        numberOfDoors: 4
                                    })
                                ;
                // sets an undefined variable for 'hasFancyRadio',
                // explicitly defines "true" as default when value is undefined
                $scope.hasFancyRadio = undefined;
                $scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);

                // fourth car, purple, 4 doors,
                // uses class default for hasLeatherSeats
                $scope.car4     = CarFactory
                                    .instance({
                                        color: 'purple',
                                        numberOfDoors: 4
                                    });
                // and then explicitly sets hasLeatherSeats to undefined
                $scope.hasLeatherSeats = undefined;
                $scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);

                // in console, type window.testCtrl to see the resulting objects

            });
    </script>

මෙන්න සරල උදාහරණයක්. අක්ෂාංශ හා දේශාංශ නිරාවරණය වන "පිහිටුම්" වස්තුවක් අපේක්ෂා කරන තෙවන පාර්ශවීය පුස්තකාල කිහිපයක් මම භාවිතා කරමි, නමුත් විවිධ වස්තු ගුණාංග හරහා. මට විකුණුම්කරුගේ කේතය හැක් කිරීමට අවශ්‍ය නොවීය, එබැවින් මා පසුකර යන "පිහිටුම්" වස්තු සකස් කළෙමි.

    angular.module('app')
.factory('PositionFactory', function() {

    /**
     * BroilerPlate Object Instance Factory Definition / Example
     */
    this.Position = function() {

        // initialize instance properties 
        // (multiple properties to satisfy multiple external interface contracts)
        angular.extend(this, {
            lat         : null,
            lon         : null,
            latitude    : null,
            longitude   : null,
            coords: {
                latitude: null,
                longitude: null
            }
        });

        this.setLatitude = function(latitude) {
            this.latitude           = latitude;
            this.lat                = latitude;
            this.coords.latitude    = latitude;
            return this;
        };
        this.setLongitude = function(longitude) {
            this.longitude          = longitude;
            this.lon                = longitude;
            this.coords.longitude   = longitude;
            return this;
        };

    }; // end class definition

    // instance factory method / constructor
    this.Position.prototype.instance = function(params) {
        return new 
            this.constructor()
                    .setLatitude(params.latitude)
                    .setLongitude(params.longitude)
        ;
    };

    return new this.Position();

}) // end Factory Definition

.controller('testCtrl', function($scope, PositionFactory) {
    $scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
    $scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller

;

මෙම පිටුව සහ ප්‍රලේඛනය (මා බැලූ අවසාන වතාවේ සිට බොහෝ සෙයින් දියුණු වී ඇති බව පෙනේ) භාවිතා කරමින්, සැපයුම්කරුගේ රස 5 න් 4 ක් භාවිතා කරන පහත දැක්වෙන සැබෑ (-ඉෂ්) ලෝක නිරූපණය මම එකට තැබුවෙමි; වටිනාකම, නියත, කර්මාන්තශාලාව සහ පූර්ණ ලෙස සපයනු ලබන සැපයුම්කරු.

HTML:

<div ng-controller="mainCtrl as main">
    <h1>{{main.title}}*</h1>
    <h2>{{main.strapline}}</h2>
    <p>Earn {{main.earn}} per click</p>
    <p>You've earned {{main.earned}} by clicking!</p>
    <button ng-click="main.handleClick()">Click me to earn</button>
    <small>* Not actual money</small>
</div>

යෙදුම

var app = angular.module('angularProviders', []);

// A CONSTANT is not going to change
app.constant('range', 100);

// A VALUE could change, but probably / typically doesn't
app.value('title', 'Earn money by clicking');
app.value('strapline', 'Adventures in ng Providers');

// A simple FACTORY allows us to compute a value @ runtime.
// Furthermore, it can have other dependencies injected into it such
// as our range constant.
app.factory('random', function randomFactory(range) {
    // Get a random number within the range defined in our CONSTANT
    return Math.random() * range;
});

// A PROVIDER, must return a custom type which implements the functionality 
// provided by our service (see what I did there?).
// Here we define the constructor for the custom type the PROVIDER below will 
// instantiate and return.
var Money = function(locale) {

    // Depending on locale string set during config phase, we'll
    // use different symbols and positioning for any values we 
    // need to display as currency
    this.settings = {
        uk: {
            front: true,
            currency: '£',
            thousand: ',',
            decimal: '.'
        },
        eu: {
            front: false,
            currency: '€',
            thousand: '.',
            decimal: ','
        }
    };

    this.locale = locale;
};

// Return a monetary value with currency symbol and placement, and decimal 
// and thousand delimiters according to the locale set in the config phase.
Money.prototype.convertValue = function(value) {

    var settings = this.settings[this.locale],
        decimalIndex, converted;

    converted = this.addThousandSeparator(value.toFixed(2), settings.thousand);

    decimalIndex = converted.length - 3;

    converted = converted.substr(0, decimalIndex) +
        settings.decimal +
        converted.substr(decimalIndex + 1);    

    converted = settings.front ?
            settings.currency + converted : 
            converted + settings.currency; 

    return converted;   
};

// Add supplied thousand separator to supplied value
Money.prototype.addThousandSeparator = function(value, symbol) {
   return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, symbol);
};

// PROVIDER is the core recipe type - VALUE, CONSTANT, SERVICE & FACTORY
// are all effectively syntactic sugar built on top of the PROVIDER construct
// One of the advantages of the PROVIDER is that we can configure it before the
// application starts (see config below).
app.provider('money', function MoneyProvider() {

    var locale;

    // Function called by the config to set up the provider
    this.setLocale = function(value) {
        locale = value;   
    };

    // All providers need to implement a $get method which returns
    // an instance of the custom class which constitutes the service
    this.$get = function moneyFactory() {
        return new Money(locale);
    };
});

// We can configure a PROVIDER on application initialisation.
app.config(['moneyProvider', function(moneyProvider) {
    moneyProvider.setLocale('uk');
    //moneyProvider.setLocale('eu'); 
}]);

// The ubiquitous controller
app.controller('mainCtrl', function($scope, title, strapline, random, money) {

    // Plain old VALUE(s)
    this.title = title;
    this.strapline = strapline;

    this.count = 0;

    // Compute values using our money provider    
    this.earn = money.convertValue(random); // random is computed @ runtime
    this.earned = money.convertValue(0);

    this.handleClick = function() { 
        this.count ++;
        this.earned = money.convertValue(random * this.count);
    };
});

වැඩ කරන නිරූපණය .

මෙම පිළිතුර මාතෘකාව / ප්‍රශ්නය ආමන්ත්‍රණය කරයි

කර්මාන්තශාලාව, සේවාව සහ නියත - සැපයුම්කරුවන්ගේ වට්ටෝරුවක සින්ටැක්ටික් සීනි පමණක් වන්නේ කෙසේද?

හෝ

කර්මාන්තශාලා, සේවා සහ සැපයුම්කරුවන් අභ්‍යන්තරව සමාන වන්නේ කෙසේද

මූලික වශයෙන් සිදුවන්නේ එයයි

ඔබ විසින් සිදු කරන විට factory()එය ඔබට සකසයි functionසම්පාදකයාගේ දෙවැනි තර්කය ලබා $getහා එය ආපසු ( provider(name, {$get:factoryFn })), ඔබ ලබා ගන්න තමයි providerනමුත් හැර වෙනත් දේපල / ක්රමය ඇති$get ඒ provider(මාර්ගයෙන් ඔබ මෙය මානකරණය නොහැක)

කර්මාන්තශාලාවේ ප්‍රභව කේතය

function factory(name, factoryFn, enforce) {
    return provider(name, {
      $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
    });
};

කරන විට එය service()ඔබට කර්මාන්ත ශාලාවක් ලබා (නැවත) සමඟ functioninjects බව constructor(ඔබ ඔබගේ සේවය ලබා දී ඇති ඉදිකිරීමටත් පිළිබඳ කාරණයේ නැවත) සහ ප්රතිලාභ එය

ප්‍රභව සේවා කේතය

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
};

එබැවින් මූලික වශයෙන් අවස්ථා දෙකේදීම ඔබට සැපයුම්කරුවන් ලැබෙනු ඇත you ඔබ ලබා දුන් ඔබේ ශ්‍රිතයට සකසා ගන්න, නමුත් වින්‍යාස වාරණය සඳහා සැපයුම්කරු () හි මුලින් සැපයිය හැකි පරිදි ලබා ගන්න than ට වඩා වැඩි යමක් ඔබට ලබා දිය හැකිය.

මම ඉතා හොඳ පිළිතුරක් දන්නා නමුත්
1 භාවිතා කිරීමේ මගේ අත්දැකීම් බෙදාහදා serviceගත යුතුය. බොහෝ පෙරනිමි අවස්ථා සඳහා
2. factoryඑම විශේෂිත අවස්ථාව සේවාව නිර්මාණය කිරීමට භාවිතා කරයි.

// factory.js ////////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .factory('xFactory', xFactoryImp);
xFactoryImp.$inject = ['$http'];

function xFactoryImp($http) {
    var fac = function (params) {
        this._params = params; // used for query params
    };

    fac.prototype.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }
    return fac;
}
})();

// service.js //////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .service('xService', xServiceImp);
xServiceImp.$inject = ['$http'];

function xServiceImp($http) {  
    this._params = {'model': 'account','mode': 'list'};

    this.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }       
}
})();

සහ භාවිතා කිරීම:

controller: ['xFactory', 'xService', function(xFactory, xService){

        // books = new instance of xFactory for query 'book' model
        var books = new xFactory({'model': 'book', 'mode': 'list'});

        // accounts = new instance of xFactory for query 'accounts' model
        var accounts = new xFactory({'model': 'account', 'mode': 'list'});

        // accounts2 = accounts variable
        var accounts2 = xService;
... 

සාදයට ටිකක් පරක්කුයි. කර්මාන්තශාලා, සේවා සහ සැපයුම් ක්‍රමවේදයන් භාවිතා කරමින් කෝණික ජේඑස් අභිරුචි සේවා සංවර්ධනය කිරීම පිළිබඳව ඉගෙන ගැනීමට (හෝ පැහැදිලි බවක් ඇති) කැමති අයට මෙය වඩාත් ප්‍රයෝජනවත් යැයි මම සිතුවෙමි.

AngularJS අභිරුචි සේවා සංවර්ධනය කිරීම සඳහා කර්මාන්තශාලා, සේවා සහ සැපයුම් ක්‍රමවේදයන් පිළිබඳව පැහැදිලිව විස්තර කරන මෙම වීඩියෝව මට හමු විය:

https://www.youtube.com/watch?v=oUXku28ex-M

ප්‍රභව කේතය: http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service

මෙහි පළ කර ඇති කේතය පා source කයන්ට ප්‍රයෝජනවත් වන පරිදි ඉහත ප්‍රභවයෙන් කෙළින්ම පිටපත් කරනු ලැබේ.

"කර්මාන්තශාලා" මත පදනම් වූ අභිරුචි සේවාව සඳහා වන කේතය පහත පරිදි වේ (එය සමමුහුර්ත හා අසින්ක් අනුවාද සමඟ http සේවාව ඇමතීම සමඟ යයි):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcFactory',
  function($scope, calcFactory) {
    $scope.a = 10;
    $scope.b = 20;

    $scope.doSum = function() {
      //$scope.sum = calcFactory.getSum($scope.a, $scope.b); //synchronous
      calcFactory.getSum($scope.a, $scope.b, function(r) { //aynchronous
        $scope.sum = r;
      });
    };

  }
]);

app.factory('calcFactory', ['$http', '$log',
  function($http, $log) {
    $log.log("instantiating calcFactory..");
    var oCalcService = {};

    //oCalcService.getSum = function(a,b){
    //	return parseInt(a) + parseInt(b);
    //};

    //oCalcService.getSum = function(a, b, cb){
    //	var s = parseInt(a) + parseInt(b);
    //	cb(s);
    //};

    oCalcService.getSum = function(a, b, cb) { //using http service

      $http({
        url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
        method: 'GET'
      }).then(function(resp) {
        $log.log(resp.data);
        cb(resp.data);
      }, function(resp) {
        $log.error("ERROR occurred");
      });
    };

    return oCalcService;
  }
]);

අභිරුචි සේවා සඳහා "සේවා" ක්‍රමවේදය සඳහා කේතය (මෙය 'කර්මාන්තශාලාවට' බෙහෙවින් සමාන ය, නමුත් සින්ටැක්ස් දෘෂ්ටි කෝණයෙන් වෙනස් වේ):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.service('calcService', ['$http', '$log', function($http, $log){
	$log.log("instantiating calcService..");
	
	//this.getSum = function(a,b){
	//	return parseInt(a) + parseInt(b);
	//};

	//this.getSum = function(a, b, cb){
	//	var s = parseInt(a) + parseInt(b);
	//	cb(s);
	//};

	this.getSum = function(a, b, cb){
		$http({
			url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
			method: 'GET'
		}).then(function(resp){
			$log.log(resp.data);
			cb(resp.data);
		},function(resp){
			$log.error("ERROR occurred");
		});
	};

}]);

අභිරුචි සේවා සඳහා "සැපයුම්කරු" ක්‍රමවේදය සඳහා කේතය (වින්‍යාසගත කළ හැකි සේවාවක් සංවර්ධනය කිරීමට ඔබ කැමති නම් මෙය අවශ්‍ය වේ):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.provider('calcService', function(){

	var baseUrl = '';

	this.config = function(url){
		baseUrl = url;
	};

	this.$get = ['$log', '$http', function($log, $http){
		$log.log("instantiating calcService...")
		var oCalcService = {};

		//oCalcService.getSum = function(a,b){
		//	return parseInt(a) + parseInt(b);
		//};

		//oCalcService.getSum = function(a, b, cb){
		//	var s = parseInt(a) + parseInt(b);
		//	cb(s);	
		//};

		oCalcService.getSum = function(a, b, cb){

			$http({
				url: baseUrl + '/Sum?a=' + a + '&b=' + b,
				method: 'GET'
			}).then(function(resp){
				$log.log(resp.data);
				cb(resp.data);
			},function(resp){
				$log.error("ERROR occurred");
			});
		};		

		return oCalcService;
	}];

});

app.config(['calcServiceProvider', function(calcServiceProvider){
	calcServiceProvider.config("http://localhost:4467");
}]);

අවසාන වශයෙන් ඉහත ඕනෑම සේවාවක් සමඟ ක්‍රියා කරන UI:

<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
	<script type="text/javascript" src="t03.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="emp">
		<div>
			Value of a is {{a}},
			but you can change
			<input type=text ng-model="a" /> <br>

			Value of b is {{b}},
			but you can change
			<input type=text ng-model="b" /> <br>

		</div>
		Sum = {{sum}}<br>
		<button ng-click="doSum()">Calculate</button>
	</div>
</body>
</html>

AngularJS ප්‍රභවයෙන් කරුණු පැහැදිලි කර ගැනීම සඳහා, සේවාවක් කර්මාන්තශාලා ශ්‍රිතය ලෙස හඳුන්වන අතර එය සැපයුම්කරුගේ ක්‍රියාකාරිත්වය ලෙස හැඳින්වේ:

function factory(name, factoryFn) { 
    return provider(name, { $get: factoryFn }); 
}

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
}

AngularJS හි ව්‍යාපාරික තර්කනය හැසිරවීමේ ක්‍රම තුනක් අපි සරල ආකාරයකින් සාකච්ඡා කරමු: ( යාකොව්ගේ Coursera AngularJS පා course මාලාවෙන් ආනුභාව ලත් )

සේවාව :

වාක්‍ය ඛණ්ඩය:

app.js

 var app = angular.module('ServiceExample',[]);
 var serviceExampleController =
              app.controller('ServiceExampleController', ServiceExampleController);
 var serviceExample = app.service('NameOfTheService', NameOfTheService);

 ServiceExampleController.$inject = ['NameOfTheService'] //protects from minification of js files

function ServiceExampleController(NameOfTheService){
     serviceExampleController = this;
     serviceExampleController.data = NameOfTheService.getSomeData();
 }

function NameOfTheService(){
     nameOfTheService = this;
     nameOfTheService.data = "Some Data";
     nameOfTheService.getSomeData = function(){
           return nameOfTheService.data;
     }     
}