Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Premium
Register
Login
Sharing Data Between Angular Controllers
Veera Pallati
Jan 13, 2016
4.1k
0
1
WhatsApp
In this article you will learn the data sharing between angular controllers.
routing.zip
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:
Contacts View:
Where we see all the contacts.
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:
<!DOCTYPE html
>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
ng-app
=
"myApp"
>
<
head
>
<
title
>
</
title
>
<
link
href
=
"../css/bootstrap.css"
rel
=
"stylesheet"
/>
<
link
href
=
"../css/bootstrap-theme.css"
rel
=
"stylesheet"
/>
<
script
src
=
"../js/jquery-1.9.1.js"
>
</
script
>
<
script
src
=
"../js/bootstrap.js"
>
</
script
>
<
script
src
=
"../js/angular.js"
>
</
script
>
<
script
src
=
"../js/angular-route.js"
>
</
script
>
<
script
src
=
"routing.js"
>
</
script
>
<
script
src
=
"../js/underscore.js"
>
</
script
>
</
head
>
<
body
>
<
nav
class
=
"navbar navbar-default"
>
<
div
class
=
"container-fluid"
>
<!-- Brand and toggle get grouped for better mobile display -->
<
div
class
=
"navbar-header"
>
<
button
type
=
"button"
class
=
"navbar-toggle collapsed"
data-toggle
=
"collapse"
data-target
=
"#bs-example-navbar-collapse-1"
aria-expanded
=
"false"
>
<
span
class
=
"sr-only"
>
Toggle navigation
</
span
>
<
span
class
=
"icon-bar"
>
</
span
>
<
span
class
=
"icon-bar"
>
</
span
>
<
span
class
=
"icon-bar"
>
</
span
>
</
button
>
<
a
class
=
"navbar-brand"
href
=
"#"
>
Routing Example
</
a
>
</
div
>
<!-- Collect the nav links, forms, and other content for toggling -->
<
div
class
=
"collapse navbar-collapse"
id
=
"bs-example-navbar-collapse-1"
>
<
ul
class
=
"nav navbar-nav"
>
<
li
>
<
a
href
=
"#contacts"
>
Contacts
</
a
>
</
li
>
<
li
>
<
a
href
=
"#addContact"
>
Add Contact
</
a
>
</
li
>
</
ul
>
</
div
>
<!-- /.navbar-collapse -->
</
div
>
<!-- /.container-fluid -->
</
nav
>
<
div
class
=
"container-fluid"
>
<
div
ng-view
>
</
div
>
</
div
>
</
body
>
</
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,
<
h3
>
Contacts
</
h3
>
<
div
class
=
"row"
>
<
div
class
=
"col-lg-4"
ng-repeat
=
"contact in contacts"
>
<
div
>
<
div
class
=
"well"
>
<
fieldset
>
<
legend
>
Contact Card
</
legend
>
<
table
>
<
tr
>
<
td
>
First Name :
</
td
>
<
td
id
=
"lblFirstName"
>
<
b
>
{{contact.firstName}}
</
b
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Last Name :
</
td
>
<
td
>
<
b
>
{{contact.lastName}}
</
b
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Phone :
</
td
>
<
td
>
<
b
>
{{contact.phone}}
</
b
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Team :
</
td
>
<
td
>
<
b
>
{{contact.team}}
</
b
>
</
td
>
</
tr
>
</
table
>
<
br
/>
<
div
class
=
"row"
>
<
div
class
=
"col-lg-6"
>
<
a
ng-click
=
"editContact(contact)"
class
=
"btn btn-sm btn-primary"
>
Edit
</
a
>
<
a
ng-click
=
"deleteContact(contact)"
class
=
"btn btn-sm btn-warning"
>
Delete
</
a
>
</
div
>
</
div
>
</
fieldset
>
</
div
>
</
div
>
</
div
>
</
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.
<
h3
>
Add Contact
</
h3
>
<
div
class
=
"row"
>
<
div
class
=
"col-lg-4"
>
<
div
class
=
"well"
>
<
form
class
=
"form-horizontal"
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
First Name
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.firstName"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"First Name"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
Last Name
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.lastName"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"Last Name"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
Phone
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.phone"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"Phone"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
Team
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.team"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"Team"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
div
class
=
"col-sm-offset-3 col-sm-9"
>
<
a
href
=
"#contacts"
ng-click
=
"addContact()"
class
=
"btn btn-success"
id
=
"inputFirstName"
>
Save
</
a
>
</
div
>
</
div
>
</
form
>
</
div
>
</
div
>
</
div
>
Step 5:
Add the edit-contacts page with the following code.
<
h3
>
Edit Contact
</
h3
>
<
div
class
=
"row"
>
<
div
class
=
"col-lg-4"
>
<
div
class
=
"well"
>
<
form
class
=
"form-horizontal"
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
First Name
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.firstName"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"First Name"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
Last Name
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.lastName"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"Last Name"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
Phone
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.phone"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"Phone"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputFirstName"
class
=
"col-sm-3 col-lg-3 control-label"
>
Team
</
label
>
<
div
class
=
"col-sm-9"
>
<
input
type
=
"text"
ng-model
=
"contact.team"
class
=
"form-control"
id
=
"inputFirstName"
placeholder
=
"Team"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
div
class
=
"col-sm-offset-3 col-sm-9"
>
<
a
href
=
"#contacts"
ng-click
=
"addContact()"
class
=
"btn btn-success"
id
=
"inputFirstName"
>
Save
</
a
>
</
div
>
</
div
>
</
form
>
</
div
>
</
div
>
</
div
>
Step 6:
The following code in the
routing.js
referenced in the
index.html
page.
var
myApp = angular.module(
'myApp'
, [
'ngRoute'
]);
myApp.factory(
'_'
, [
'$window'
,
function
($window) {
return
$window._;
// assumes underscore has already been loaded on the page
}]);
myApp.config(
function
($routeProvider) {
$routeProvider.when(
'/'
, {
templateUrl:
'contacts.html'
,
controller:
'contactsController'
}).
when(
'/contacts'
, {
templateUrl:
'contacts.html'
,
controller:
'contactsController'
}).
when(
'/addContact'
, {
templateUrl:
'add-contact.html'
,
controller:
'addContactController'
}).
when(
'/editContact'
, {
templateUrl:
'edit-contact.html'
,
controller:
'editContactController'
});
});
myApp.controller(
'myController'
, myController);
function
myController($scope) {
}
myApp.service(
'contactsService'
, contactsService);
function
contactsService(_) {
var
service = {};
service.contacts = [
{
firstName:
'Pallati'
,
lastName:
'Veera'
,
phone:
'XXXXXXXXXXX'
,
team:
'XXXXXX'
},
{
firstName:
'Gangone'
,
lastName:
'Pavan'
,
phone:
'XXXXXXXXXXXX'
,
team:
'XXXXXX'
},
{
firstName:
'Vempati'
,
lastName:
'Shabarinath'
,
phone:
'XXXXXXXXXXXX'
,
team:
'XXXXX'
}
];
service.deleteContact =
function
(contact) {
service.contacts = _.without(service.contacts, contact);
};
service.selectedContact = {};
return
service;
};
myApp.controller(
'contactsController'
, contactsController);
function
contactsController($scope, contactsService, $location) {
$scope.contacts = contactsService.contacts;
$scope.deleteContact =
function
(contact) {
contactsService.deleteContact(contact);
$scope.contacts = contactsService.contacts;
}
$scope.editContact =
function
(contact) {
contactsService.selectedContact = contact;
$location.path(
'editContact'
);
}
}
myApp.controller(
'addContactController'
, addContactController);
function
addContactController($scope, contactsService) {
$scope.contact = {};
$scope.addContact =
function
() {
contactsService.contacts.push($scope.contact);
};
}
myApp.controller(
'editContactController'
, editContactController);
function
editContactController($scope, contactsService) {
$scope.contact = contactsService.selectedContact;
}
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
Angular Controllers
AngularJs
Sharing Data in Angular Controllers
Recommended Free Ebook
Azure in 24 Days
Download Now!
Next Recommended Readings