What is a service?
The word benefit is an over-burden term. I need to illuminate that when I utilize the term benefit, I am extremely simply alluding to a basic question that does a type of work. (For a presentation into JavaScript objects look at this post). The kind of administration I'm discussing is commonly stateless and typifies a type of usefulness. The primary open individuals from an administration are capacities not properties, particularly since having properties recommends a type of state. I am not alluding to over-the-wire administrations, for example, web administrations, RESTful administrations, or WCF administrations - in spite of the fact that these do undoubtedly fall under my meaning of an administration. When I say benefit, that administration could conceivably be gotten to over-the-wire. Frequently, they're simply questions called specifically inside your JavaScript.
Why we require Services
In my past post about AngularJS controllers, I talked somewhat about the requirement for partition of worries in advanced JavaScript applications, which are substantially more required than those of 10 years prior. With the measure of JavaScript required in an advanced application, the engineering of your JavaScript goes up against substantially more significance. Two of the five SOLID standards of question situated outline are straightforwardly identified with Services: the Single Responsibility Principle (SRP) and the Dependency Inversion Principle (DIP).
The single obligation standard encourages that each protest ought to have a solitary duty. On the off chance that we utilize the case of a controller, it's duty is basically to wire up the extension (which holds your models) to your view; it is basically the scaffold between your models and your perspectives. On the off chance that your controller is likewise in charge of making ajax calls to get and refresh information, this is an infringement of the SRP rule. Rationale like that (and different business rationale) ought to rather be dreamy out into a different administration, at that point infused into the articles that need to utilize it.
This is the place the Dependency Inversion Principle comes in. The DIP expresses that articles ought to rely upon deliberations, not solidifications. In dialects like C# and Java, this implies your items rely upon Interfaces rather than Classes. In JavaScript you could take a gander at any parameter of any capacity (constructor work or something else) as a reflection, since you can go in any protest for that parameter insofar as it has the individuals on it that are utilized inside that strategy. In any case, the key here is the capacity to utilize reliance infusion - the capacity to infuse into different articles. This implies the greater part of your controllers, orders, channels and different administrations should take in any outside conditions as parameters amid development. This enables you to have inexactly coupled code and has the additional advantage of making unit testing considerably simpler.
Making a custom administration
We should begin with this fiddle which is the place we finished in my last post. Notice that in the controller we are setting $scope.users1 to a static exhibit of clients. We should transform it so it's gotten to through an ajax call. Be that as it may, obviously, this shouldn't be a duty of our Controller, so how about we make a support of handle it, and our controller will call the administration.
To make the administration, we utilize the module's manufacturing plant strategy. Add this code to the base of the JavaScript in the fiddle:
myModule.factory('userRepository', work() {
return { };
});
With this code, we are making another administration named userRepository. Notice that the main parameter of the processing plant technique is the name we need to provide for our administration, and furthermore see that the second parameter of the manufacturing plant strategy is a capacity. The protest returned by that capacity speaks to our administration. For this situation we are basically restoring a vacant protest exacting, so our administration does nothing. So this makes one wonder: in the event that we basically restore the protest that will be our administration, for what reason do we require the various service of myModule.factory? By utilizing the industrial facility technique we are enrolling our administration with Angular. This permits Angular's reliance infusion holder to infuse a case of our administration when we ask for it in different spots. I'll exhibit this in a matter of seconds when we utilize this administration in our controller.
Until further notice, allows simply let our administration uncover our static exhibit of clients. Refresh that arrival proclamation to resemble this:
return {
getAllUsers: work() {
return [
{ firstName: 'Jane', lastName: 'Doe', age: 29 },
{ firstName: 'John', lastName: 'Doe', age: 32 }
];
}
};
Notice that we are currently restoring a protest with a getAllUsers() work on it. This capacity restores our exhibit. Your fiddle should now look something like this. So now, we can call userRepository.getAllUsers() to get our variety of clients. How about we take a gander at how we'd do that in our controller.
Utilizing your custom administrations
Taking care of reliance infusion is something that AngularJS does. It's unbelievably basic, yet exceptionally viable. The main thing you need to do is enroll your administration with Angular which we simply exhibited previously. Presently all you need to do to utilize it is infuse it. In any case, before we do that, how about we evacuate the hard-coded clients cluster that is in our controller. That way you can see that the page is as of now not working. Evacuate the "$scope.users = ..." line from your controller, and you'll see that the information vanishes from the page. Presently infuse our new custom administration by including it as a parameter where we're now infusing $scope. Change the principal line of your controller definition to resemble this:
myModule.controller('myController', function($scope, userRepository) {
That is it. Rakish will presently deal with making a userRepository for you to use in your controller. Presently how about we utilize our storehouse. Include this line inside the controller:
$scope.users = userRepository.getAllUsers();
Your fiddle should now look something like this. Also, now investigate the yield, we presently have our clients appearing on our page once more, just this time, the information is originating from our administration. Congrats! You just made and utilized your first custom administration.
Utilizing an inherent AngularJs benefit
Presently we should look again at utilizing an implicit Angular administration, and supplant our static client exhibit with a http call. For this I've set up a MongoLab database with a clients accumulation. You can see the information here. We should hit that URL with the AngularJS $http benefit. In the first place, infuse the $http benefit into our new administration:
myModule.factory('userRepository', function($http) {
Presently, supplant the code inside the getAllUsers technique in the userRepository benefit with this:
var url = "https://api.mongolab.com/programming interface/1/databases/angularjs-introduction/accumulations/users?apiKey=terrPcifZzn01_ImGsFOIZ96SwvSXgN9";
return $http.get(url);
Obviously, now that we've rolled out that improvement we're getting some extremely abnormal yield on our page. That is on the grounds that we're basically restoring a guarantee from our administration, not the real information. The $http call is asyncronous, and what is being returned is a protest that has achievement and disappointment works on it. We'll have to use these inside our controller, so change the "$scope.users =" line in the controller to resemble this:
userRepository.getAllUsers().success(function(users) {$scope.users = users});
Presently the information ought to appear on the site page once more, just this time it's originating from a http call to mongolabs! Entirely amazing, huh? Your fiddle should resemble this. On the off chance that you take a gander at the line we simply altered in our controller, you can see that we are indicating a capacity to be endless supply of the http/ajax call, and that capacity takes in the information came back from the ajax call. Inside that capacity we are setting $scope.users to the information from the ajax call.
There are loads of implicit AngularJS administrations that are talked about in the AngularJS Fundamentals Pluralsight course, and making custom administrations is likewise shrouded in more noteworthy detail. Look at it in the event that you'd jump at the chance to take in more.
No comments:
Post a Comment