Angular JS : Services continued..

Each view has its own $scope, so whatever variables one view controller sets on its $scope variable, those variables are invisible to other controllers. Let us see this by an example – index.html:


<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>AngularJS Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="../js/main.js"></script>
</head>
<body>

<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">AngularJS Demo</a>
</div>
</div>
</nav>
</header>

<div class="container">

<div class="row well" ng-controller="mainController">
<h1>{{name}}</h1>
</div>

<div class="row well"ng-controller="secondController">
<h1>{{name}}</h1>
</div>

</div>
</body>
</html>

Notice that we have 2 controllers now accessing the same name variable. Lets see the js code – main.js:


// MODULE
var myApp = angular.module('angularApp', []);

// CONTROLLERS
myApp.controller('mainController', ["$scope", function ($scope) {

$scope.name="John";

}]);

myApp.controller('secondController', ["$scope",function ($scope) {

$scope.name="Jane";

}]);

We defined 2 controllers in our module with takes $scope as input. We then added the ‘name’ property to each one. Result:

moreServices1

As you can see, the $scope object used by the two controllers are not the same $scope object. Angular JS provides a new object to each controller that is visible to a certain part of view.

Every application has a single root scope ($rootScope). All other scopes are descendant scopes of the root scope. You can use it by passing it into your controller like $scope. Variables set at the root-scope are available to the controller scope via prototypical inheritance, so this could be use to share data among different controllers.

It’s important to note that AngularJS services are always singletons (except $scope). This means that, once AngularJS constructs a service object, the same instance is reused throughout your app. There are never ever two service instances. This makes them great candidates to share application data across multiple components. Lets see this by an example:


// MODULE
var myApp = angular.module('angularApp', []);

// CONTROLLERS
myApp.controller('mainController', ["$scope","$log", function ($scope,$log) {

$scope.name1="John";
$log.property1="property1";

}]);

myApp.controller('secondController', ["$scope","$log",function ($scope,$log) {

$scope.name2="Jane";
$log.property2="property2";
$log.log("Scope==>"+$scope.name1+" "+$scope.name2);
$log.log("Log==>"+$log.property1+" "+$log.property2);

}]);

Result:

moreService2

As you can see $log has property1 also which was defined in another controller, but $scope as we know is a new object for every controller.

There are many other services that we can use. Just look it up in angular docs. Lets take an example. We would use the ngMessages module. index.html:


<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>AngularJS Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-messages.min.js"></script>
<script src="../js/main.js"></script>
</head>
<body>

<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">AngularJS Demo</a>
</div>
</div>
</nav>
</header>

<div class="container">

<form name="userForm">
<input
type="text"
name="username"
ng-model="user.username"
ng-minlength="3"
ng-maxlength="8"
required>

<!-- show an error if username is too short -->
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>

<!-- show an error if username is too long -->
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>

<!-- show an error if this isn't filled in -->
<p ng-show="userForm.username.$error.required">Your username is required.</p>

</form>

</div>
</body>
</html>

Notice we included angular-messages.min.js after the angular js file. Then we created a simple form with one field only and used few error conditions. Now we have to tell angular that we need to use this module. Based on the documentation we know that it is called ngMessages. main.js:


// MODULE
var myApp = angular.module('angularApp', ['ngMessages']);

// CONTROLLERS
myApp.controller('mainController', ["$scope","$log", function ($scope,$log) {


}]);

Remember the second parameter in the module function which till now we passed an empty array. Its actually an array of dependencies that can be passed to angular. So we passed ‘ngMessages’ as a dependency to our angularApp module. Now we can use its services.

moreservices3 moreservices4

 

%d bloggers like this: