Angular

Sharing Data Between Angular Controllers

In this article, I am going to show how to share the data between controllers. As we know every view will have it's own controller while navigating from one view to other view, corresponding view controller will get created every time. Due to this there won't be any state persisted in the controller, but if we want to share the data from one controller to other, then how to achieve this.
 
I will demonstrate the sharing data between controller using two simple views: 
  1. Contacts View: Where we see all the contacts.
  2. Add/Edit Contact View: Where we edit or add the contact.
Step 1: Download the AngularJS, JQuery, Bootstrap and underscore.js.
Step 2: Create the html page (index.html) with the following code:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">  
  3. <head>  
  4.     <title></title>  
  5.     <link href="../css/bootstrap.css" rel="stylesheet" />  
  6.     <link href="../css/bootstrap-theme.css" rel="stylesheet" />  
  7.     <script src="../js/jquery-1.9.1.js"></script>  
  8.     <script src="../js/bootstrap.js"></script>  
  9.     <script src="../js/angular.js"></script>  
  10.     <script src="../js/angular-route.js"></script>  
  11.     <script src="routing.js"></script>  
  12.     <script src="../js/underscore.js"></script>  
  13. </head>  
  14. <body>  
  15.     <nav class="navbar navbar-default">  
  16.         <div class="container-fluid">  
  17.             <!-- Brand and toggle get grouped for better mobile display -->  
  18.             <div class="navbar-header">  
  19.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">  
  20.                     <span class="sr-only">Toggle navigation</span>  
  21.                     <span class="icon-bar"></span>  
  22.                     <span class="icon-bar"></span>  
  23.                     <span class="icon-bar"></span>  
  24.                 </button>  
  25.                 <a class="navbar-brand" href="#">Routing Example</a>  
  26.             </div>  
  27.   
  28.             <!-- Collect the nav links, forms, and other content for toggling -->  
  29.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
  30.                 <ul class="nav navbar-nav">  
  31.                     <li><a href="#contacts">Contacts</a></li>  
  32.                     <li><a href="#addContact">Add Contact</a></li>  
  33.                 </ul>  
  34.             </div><!-- /.navbar-collapse -->  
  35.         </div><!-- /.container-fluid -->  
  36.     </nav>  
  37.     <div class="container-fluid">  
  38.         <div ng-view></div>  
  39.     </div>  
  40. </body>  
  41. </html> 
 In the above code snippet basically we are adding bootstrap, css, jQuery, Angularjs and underscore reference to HTML page.
 
Step 3: Create an html page (contacts.html) with the following code,
  1. <h3>  
  2.     Contacts  
  3. </h3>  
  4. <div class="row">  
  5.     <div class="col-lg-4" ng-repeat="contact in contacts">  
  6.         <div>  
  7.             <div class="well">  
  8.                 <fieldset>  
  9.                     <legend>  
  10.                         Contact Card  
  11.                     </legend>  
  12.                     <table>  
  13.                         <tr>  
  14.                             <td>First Name :</td>  
  15.                             <td id="lblFirstName"><b> {{contact.firstName}}</b></td>  
  16.                         </tr>  
  17.                         <tr>  
  18.                             <td>Last Name :</td>  
  19.                             <td><b>{{contact.lastName}}</b></td>  
  20.                         </tr>  
  21.                         <tr>  
  22.                             <td>Phone :</td>  
  23.                             <td> <b>{{contact.phone}}</b></td>  
  24.                         </tr>  
  25.                         <tr>  
  26.                             <td>Team :</td>  
  27.                             <td><b>{{contact.team}}</b></td>  
  28.                         </tr>  
  29.                     </table>  
  30.                     <br />  
  31.                     <div class="row">  
  32.                         <div class="col-lg-6">  
  33.                             <a ng-click="editContact(contact)" class="btn btn-sm btn-primary">Edit</a>  
  34.                             <a ng-click="deleteContact(contact)" class="btn btn-sm btn-warning">Delete</a>  
  35.                         </div>  
  36.                     </div>  
  37.                 </fieldset>  
  38.             </div>  
  39.         </div>  
  40.     </div>  
  41. </div> 
In the above code snippet we are using the ng-repeat to show the contact.
 
Step 4: Create the add contact html page (add-contacts.html) with the following code.
  1. <h3> Add Contact</h3>  
  2. <div class="row">  
  3.     <div class="col-lg-4">  
  4.         <div class="well">  
  5.             <form class="form-horizontal">  
  6.                 <div class="form-group">  
  7.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">First Name</label>  
  8.                     <div class="col-sm-9">  
  9.                         <input type="text" ng-model="contact.firstName" class="form-control" id="inputFirstName" placeholder="First Name">  
  10.                     </div>  
  11.                 </div>  
  12.                 <div class="form-group">  
  13.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">Last Name</label>  
  14.                     <div class="col-sm-9">  
  15.                         <input type="text" ng-model="contact.lastName" class="form-control" id="inputFirstName" placeholder="Last Name">  
  16.                     </div>  
  17.                 </div>  
  18.                 <div class="form-group">  
  19.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">Phone</label>  
  20.                     <div class="col-sm-9">  
  21.                         <input type="text" ng-model="contact.phone" class="form-control" id="inputFirstName" placeholder="Phone">  
  22.                     </div>  
  23.                 </div>  
  24.                 <div class="form-group">  
  25.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">Team</label>  
  26.                     <div class="col-sm-9">  
  27.                         <input type="text" ng-model="contact.team" class="form-control" id="inputFirstName" placeholder="Team">  
  28.                     </div>  
  29.                 </div>  
  30.                 <div class="form-group">  
  31.                     <div class="col-sm-offset-3 col-sm-9">  
  32.                         <a href="#contacts"  ng-click="addContact()" class="btn btn-success"  id="inputFirstName" >Save</a>  
  33.                     </div>  
  34.                 </div>  
  35.             </form>  
  36.         </div>  
  37.     </div>  
  38. </div> 
Step 5: Add the edit-contacts page with the following code.
  1. <h3> Edit Contact</h3>  
  2. <div class="row">  
  3.     <div class="col-lg-4">  
  4.         <div class="well">  
  5.             <form class="form-horizontal">  
  6.                 <div class="form-group">  
  7.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">First Name</label>  
  8.                     <div class="col-sm-9">  
  9.                         <input type="text" ng-model="contact.firstName" class="form-control" id="inputFirstName" placeholder="First Name">  
  10.                     </div>  
  11.                 </div>  
  12.                 <div class="form-group">  
  13.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">Last Name</label>  
  14.                     <div class="col-sm-9">  
  15.                         <input type="text" ng-model="contact.lastName" class="form-control" id="inputFirstName" placeholder="Last Name">  
  16.                     </div>  
  17.                 </div>  
  18.                 <div class="form-group">  
  19.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">Phone</label>  
  20.                     <div class="col-sm-9">  
  21.                         <input type="text" ng-model="contact.phone" class="form-control" id="inputFirstName" placeholder="Phone">  
  22.                     </div>  
  23.                 </div>  
  24.                 <div class="form-group">  
  25.                     <label for="inputFirstName" class="col-sm-3 col-lg-3 control-label">Team</label>  
  26.                     <div class="col-sm-9">  
  27.                         <input type="text" ng-model="contact.team" class="form-control" id="inputFirstName" placeholder="Team">  
  28.                     </div>  
  29.                 </div>  
  30.                 <div class="form-group">  
  31.                     <div class="col-sm-offset-3 col-sm-9">  
  32.                         <a href="#contacts"  ng-click="addContact()" class="btn btn-success"  id="inputFirstName" >Save</a>  
  33.                     </div>  
  34.                 </div>  
  35.             </form>  
  36.         </div>  
  37.     </div>  
  38. </div> 
Step 6: The following code in the routing.js referenced in the index.html page.
  1. var myApp = angular.module('myApp', ['ngRoute']);  
  2.   
  3. myApp.factory('_', ['$window', function ($window) {  
  4.     return $window._; // assumes underscore has already been loaded on the page  
  5. }]);  
  6.   
  7.   
  8. myApp.config(function ($routeProvider) {  
  9.     $routeProvider.when('/', {  
  10.         templateUrl: 'contacts.html',  
  11.         controller: 'contactsController'  
  12.     }).  
  13.     when('/contacts', {  
  14.         templateUrl: 'contacts.html',  
  15.         controller: 'contactsController'  
  16.     }).  
  17.     when('/addContact', {  
  18.         templateUrl: 'add-contact.html',  
  19.         controller: 'addContactController'  
  20.     }).  
  21.     when('/editContact', {  
  22.         templateUrl: 'edit-contact.html',  
  23.         controller: 'editContactController'  
  24.     });  
  25. });  
  26.   
  27. myApp.controller('myController', myController);  
  28. function myController($scope) {  
  29.   
  30. }  
  31.   
  32. myApp.service('contactsService', contactsService);  
  33. function contactsService(_) {  
  34.     var service = {};  
  35.     service.contacts = [  
  36.             {  
  37.                 firstName: 'Pallati',  
  38.                 lastName: 'Veera',  
  39.                 phone: 'XXXXXXXXXXX',  
  40.                 team: 'XXXXXX'  
  41.             },  
  42.             {  
  43.                 firstName: 'Gangone',  
  44.                 lastName: 'Pavan',  
  45.                 phone: 'XXXXXXXXXXXX',  
  46.                 team: 'XXXXXX'  
  47.             },  
  48.             {  
  49.                 firstName: 'Vempati',  
  50.                 lastName: 'Shabarinath',  
  51.                 phone: 'XXXXXXXXXXXX',  
  52.                 team: 'XXXXX'  
  53.             }  
  54.     ];  
  55.     service.deleteContact = function (contact) {  
  56.         service.contacts = _.without(service.contacts, contact);  
  57.     };  
  58.     service.selectedContact = {};  
  59.     return service;  
  60. };  
  61.   
  62. myApp.controller('contactsController', contactsController);  
  63. function contactsController($scope, contactsService, $location) {  
  64.     $scope.contacts = contactsService.contacts;  
  65.   
  66.     $scope.deleteContact = function (contact) {  
  67.         contactsService.deleteContact(contact);  
  68.         $scope.contacts = contactsService.contacts;  
  69.     }  
  70.   
  71.     $scope.editContact = function (contact) {  
  72.         contactsService.selectedContact = contact;  
  73.         $location.path('editContact');  
  74.     }  
  75. }  
  76.   
  77. myApp.controller('addContactController', addContactController);  
  78. function addContactController($scope, contactsService) {  
  79.     $scope.contact = {};  
  80.     $scope.addContact = function () {  
  81.         contactsService.contacts.push($scope.contact);  
  82.     };  
  83. }  
  84.   
  85. myApp.controller('editContactController', editContactController);  
  86. function editContactController($scope, contactsService) {  
  87.     $scope.contact = contactsService.selectedContact;  
  88. } 
In the above contactsService is created for holding data and giving the dependency in controller. As we know services are singletons, using service in angular we can share the data between controller.
 
In the above example we share the contacts array and selectedContact variable.

Screenshots
 
 
 
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs