Controller to Controller Communication Using $RouteScope in AngularJS

Sachin Kalia
Jul 22, 2015
14.6k
0
2
Article

Here I've merely thought to write my thoughts and hands-on experience with Angular. This is another article that tells you how to get your hands dirty with Controller to Controller communication using $RouteScope in AngularJs AngularJs.

I've designed a program to help you become familiar with just a few keywords that you may be confronting in the future. Those keywords are shown below in the article.

As a newbie to Angular you must be familiar with a few main keywords that you will be using in an application:

ng-app: This directive ng-app tells that this element is the "owner" of an AngularJs application.
ng-model: This directive ng-model binds the value of the input field to the application variable firstName.
ng-bind: This directive ng-bind binds the innerHTML of the specific element to the application variable firstName.

I've created an HTML page as the View and named it FirstAngularApp.html that keeps a reference of an Angular.min.js file. You can download and add it to the solution as well.

Here I have a HTML page that keeps the following code segment.

<!DOCTYPE html>
<html>
<head>
<title>DotNetPiper.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="Scripts/Main1.js"></script>
<script></script>
</head>
<body ng-app="myApp" ng-controller="Myctrl">
<div ng-controller="Myctrl1">
<strong>Custom information :</strong> {{message}}
<br />
<strong>Custom information provide by Controller 2 is :</strong> {{ CompName(message) }}
<br />
</div>
<!--
<div ng-controller="Myctrl3"></div> -->
</body>
</html>

Please have a look at the image shown below:

In the code segment shown above it has <strong>{{ CompName(message) }} <br /><br />. This code calls the function CompName defined in the Controller Myctrl1. As soon as this line executes it goes to the controller and performs the required actions.

Please refer to the image shown below that keeps the code segment for the Main1.js file.

code

$rootScope

The $rootScope is the top-most scope and acts like a global variable. An app can have only one $rootScope that will be shared among all the components. All other $scopes are children of the $rootScope.

Code segment for main1.js

/// <reference path="angular.intellisense.js" />
/// <reference path="angular.js" />
/// <reference path="angular.min.js" />
var app = angular.module('myApp', []);
app.controller('Myctrl', function ($scope, $rootScope) {
//debugger;
$scope.firstName = "Sachin Kalia";
$scope.lastName = "DotnetPiper.com";
$rootScope.testProp = "sachin";
$rootScope.CompDetail2 = function CompDetail2(data) {
return "I am called from Controller1 RootScope(Global) method name CompDetail2 =>=> " + data;
};
$scope.CompDetails = function CompDetails() {
return "Welcome to DotnetPiper.com " + $scope.firstName + " " + $scope.lastName;
};
});
app.controller('Myctrl1', function ($scope, $rootScope) {
alert("Welcome");
$scope.message = " Welcome to DotnetPiper.com!!!";
$scope.CompName = function CompName(data) {
return $rootScope.CompDetail2(data);
//alert(returnValue + "i Have added this value ");
// $rootScope.CompDetail(data);
// alert("passing value to next controller" + data);
};
});

As soon as you run BasicAngularApp.html it shows you the result as shown below in the image.

custom information

If you noticed from the image, it has main1.js shown above that calls the method compName() that accepts data as the parameter sent by the view page. Further it again tries to access the method CompDetail2() that is already defined in another controller named Myctrl and accessible using the $routeScope global variable.

$routeScope methods and property should be defined/written prior to the calling method otherwise it will provide an “undefined” error since JavaScript finds the reference line by line.

Kindly have a look at the Life cycle of the basic application as depicted below:

Life cycle of Basic application