Services are the Javascript functions (stateless object) that are responsible to do some specific tasks. We can use service to share some data or functions throughout the application within a controller or between different controllers. Services can be used just by declaring dependencies or we can say, just by injecting them to the controllers.
Let's understand this with an example:-
HTML:-
<div ng-app="exampleapp">
//Binding the first controller using directive ng-controller
<div ng-controller="DisplayController">
<label for="country" class="col-sm-3 control-label" id="country_label">Country list</label>
//Populate a list of countries that is defined in the service by their names. Initiating the dropdown menu by the first value of the array object.
<div class="col-sm-9 country">
<select name="country" id="country" ng-model="country" class="selectpicker form-control country-code select-padding" ng-options="countryObj.id as countryObj.name for countryObj in countryList" ng-init = "country = countryList[0].id"></select>
</div>
</div>
<hr/>
//Binding the second controller
<div ng-controller="AddController">
<label for="country" class="col-sm-3 control-label" id="country_label">Add Country</label>
<div class="col-sm-9 country">
//This input box will display the corresponding id of the country that is selected.
<input type="text" ng-model="country">
//Populate list by country description.
<select name="country" id="country" ng-model="country" class="selectpicker form-control country-code select-padding" ng-options="countryObj.id as countryObj.description for countryObj in countryList" ng-init = "country = countryList[0].id"></select>
</div>
</div>
</div>
Below is the JS code:-
var exampleapp = angular.module("exampleapp", []);
//Creating a service that defines and returns an array object of countries which will be displayed in the dropdown through the controllers.
exampleapp.service('exampleService', function () {
var chooseCountries=[
{id : 1, name : "US", description: "United States" },
{id : 2, name : "CA", description: "Canada"},
{id : 3, name : "AL", description: "Albania"}
];
return chooseCountries;
});
// This is the first controller that takes the service as the dependency and displays the countries in the dropdown menu.
function DisplayController($scope, exampleService) {
$scope.countryList = exampleService;
}
// This is the second controller that will fetch the same list of countries from the service injected and will show the selected corresponding country id's in the input box .
function AddController($scope, exampleService) {
$scope.countryList = exampleService;
};
}
You can find the running code in the following fiddle:- https://jsfiddle.net/munmun/ag45z3oL/1/
I have injected the service 'exampleService' to both the controllers 'DisplayController' and 'AddController' so that the 'chooseCountries' can be used by them. It is a very easy process of using data(object,functions) or sharing the data between the controllers by simply adding it as a dependency for the component that depends on the service.
0 Comment(s)