Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Sharing Data Between Controllers using Services

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 113
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: