Written by Siddartha Thota on June 24, 2015 in AngularJS

How the AngularJS Controllers Share the Data?

GET ALERTS:

Get our Latest updates delivered to your mailbox!

If $scope is said to be the glue between the Controller and the View, and the Controllers are considered as main place where the application functionality exists, so how do the controllers communicate and share the data among themselves.

We’ll be giving you a good idea in this article on How the Controllers in AngularJS share Data among themselves.

Generally it’s always preferred to use one Controller per state. In order to use the States we need to use Angular UI Router. So, lets check out how.

Check out my Plunker

Download Source Code

Index.html – Base file of our code. In this we’ve linked to Bootstrap.css, jQuery library, Angular library, Angular UI router library and app.js.

<html ng-app="app">
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<style>
  body{
    padding: 40px;
  }
</style>
  <meta charset="utf-8">
  <title>Angular Controller Data Sharing</title>
</head>
<!-- we've replaced the use of $scope with the preferred "controller as" syntax-->
<body>
<ui-view></ui-view>

</body>
</html>

We are using the <ui-view> to access $stateProvider that will configure and provide the data.


Oneview.html


<input type="text" ng-model="oneview.information.message" />
<div ng-class="oneview.information.message">
{{ oneview.information.message }} {{"World"}}
</div>

<div ui-sref="twoview">Go to TwoView</div>

This is the Initial view that’s connected to <ui-view> in the index.html page.


Twoview.html


<h1><b>{{twoview.information.message}}</b> {{"is the actual message we typed in input field on homepage"}}</h1>

This is the state carry forward information of what we’ve typed in the home page.


App.JS – The Controller file. It’s loaded with $stateProvider, service, controller.

angular.module('app', ["ui.router"])
    .config(function config($stateProvider){ //routing between pages
        $stateProvider.state("index", {
            url: "",
            controller:"OneCtrl as oneview",
            templateUrl:"oneview.html"
        })
        $stateProvider.state("twoview", {
            url: "/twoview",
            controller:"TwoCtrl as twoview",
            templateUrl:"twoview.html"
        })
    })

    .service("information", function Information(){
        var information = this;

        information.message = "Default";
    })

    .controller('OneCtrl', function OneCtrl(information) {
        var oneview = this;

        oneview.information = information;

    })
    .controller('TwoCtrl', function TwoCtrl(information) {
        var twoview = this;

        twoview.information = information;
    });

Output: 

AngularJS controllersangularjs controllers sharing data

Its a pretty straight forward process that will help you to understand how the Controllers in AngularJS tend to share data and communicate with each other by maintaining the state.

{ 0 comments… add one now }

Leave a Comment

Previous post: