Learning AngularJS Simplified - Part Two

Abhishek Singh
8y
17.5k
0
3

Article

Introduction

My previous lab1 series on AngularJS was the first article in a series where you saw what AngularJS is, and how we can set up our application to start developing web applications.

Learning AngularJS Simplified - Part One

Two way data binding

This is a very important feature of AngularJS. It helps to make view and model in sync always. AngularJS works in the model view controller pattern.

Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.
Two-way bindings in AngularJS are created with the ng-model directive.

Students.js

/step1
/// <reference path="angular.min.js" />
var studentsApp = angular.
module("studentsModule", []).
controller("studentController", function ($scope) {
$scope.message = "Hi There Students Controller!!!!";
});

HTML Code

<!DOCTYPE html>
<html ng-app="studentsModule">
<head>
<title></title>
<h2>Students Details</h2>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/StudentsJS.js"></script>
</head>
<body ng-controller="studentController">
<div >
<input ng-model="message" />
<br />
{{message}}
</div>
</body>
</html>

Result

Above message is the model which has got bound using ng-model directive which makes the model get updated once view is changed. This is a very nice feature of angular which makes it a good binding framework to keep the view and model in sync.

Here you can see the change in input is getting updated to the expression in real time .

Scope and rootScope in AngularJS

Scope is the linking between application controller and the view. Basically it’s nothing but an object which refers to application model.

In controllers, model data is accessed via $scope object.

Students.js

var studentsApp = angular.
module("studentsModule", [])
.
controller("studentController", function($scope)
{
var studentDetails = {
studentName: "Abhishek Singh",
Age: 16,
Standard: "10th"
};
$scope.studentData = studentDetails;
$scope.message = "Hello from Students Controller!!!!";
});

View Code

<!DOCTYPE html>
<html ng-app="studentsModule">
<head>
<title></title>
<h2>Students Details</h2>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/StudentsJS.js"></script>
</head>
<body ng-controller="studentController">
<div >
First Message: {{message}}
</div>
<br />
<div >
Student Name : {{studentData.studentName}}
<br />
Age:{{ studentData.Age}}
<br />
Standard:{{studentData.Standard}}
</div>
<br />
<div>
{{Name}}
{{StudentName}}
</div>
</body>
</html>

This example is from the previous Demo Example -- here we can see $scope is passed as first argument to controller during its constructor definition.

In StudentData property of the $scope, detractive studentdetails data is attached, which will be evaluated by the expression on view page where the studentController is attached to HTML DOM element.

By using scope, model data will be passed from controller to view.

AngularJS creates and injects a different $scope object to each controller in an application. So, the data and methods attached to $scope inside one controller cannot be accessed in another controller.

rootScope

Scope is controller specific. If we define nested controllers then child controller will inherit the scope of its parent controller.

The properties and methods attached to $rootScope will be available to all the controllers. Each Angular application has exactly one rootscope but may have several child scopes.

Student.js

/// <reference path="angular.min.js" />
var studentsApp = angular.module("studentsModule", []);
studentsApp.controller("studentController", function ($scope, $rootScope) {
$scope.Message1 = "This is from studentsController";
$rootScope.UniversalMseeage = "This is Global Massage"
});
studentsApp.controller("classController", function ($scope) {
$scope.Message2 = "This is from classController";
});

View code

<!DOCTYPE html>
<html ng-app="studentsModule">
<head>
<title></title>
<h2>Students Details</h2>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/StudentsJS.js"></script>
</head>
<body >
<div ng-controller="studentController">
{{UniversalMseeage}}
<br />
{{Message1}}
</div>
<br />
<div ng-controller="classController">
{{UniversalMseeage}}
<br />
{{Message2}}
</div>
</body>
</html>

Result in browser

Basically two controllers, studentController and classController scope object, have limited access which is the HTML element where that particular controller is bound using ng-controller or its child elements.

rooptScope is the parent of all scopes and it will be accessible to all the HTML elements.

Service in AngularJS

Service in angular is nothing but a JavaScript function which is created to perform a certain task. It will be used to share the functionality with different controllers by using dependency injection.

Dependency injection. Okay are you confused again?

I'm just briefing you about dependency injection butI'm diving deep.

Dependency injection is a very interesting topic to learn.

AngularJS Built in Service

AngularJS has many Built in services to support certain functionalities.

AngularJS built-in services starts with $

A few are below,

$http,
$route,
$window,
$location

AngularJS services are lazy, instantiated, and singleton in nature.

The meaning of the above line is Service is instantiated by AngularJS when an application component depends on it and all the components share the same instance of a service.

Most commonly used angular service is $http

$http

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

User Created Service

It can be done using two methods.

Factory method

studentsApp.factory(“TestSerive”)

.Factory ()

studentsApp.factory("studentfactory", function () {
return {
displayName: function (name) {
return "Hello from Factory : " + name;
}
};
});

Service Method

studentsApp.service("studentService", function () {
this.displayName = function (name) {
return "Hello" + name ;
};
});
Name: studentService
Callback: javascript fucntion
app.controller('AppController', function ($scope,MyService) {
MyService.sayHello(); // logs 'hello'
});

Service method,

Stduents.js

//step1
/// <reference path="angular.min.js" />
var studentsApp = angular.
module("studentsModule", [])
.
controller("studentController", function($scope, studentService, studentfactory)
{
var studentDetails = {
studentName: "Abhishek Singh",
Age: 16,
Standard: "10th"
};
$scope.studentData = studentDetails;
$scope.message = "Hello from Students Controller!!!!";
$scope.Name = studentService.displayName("Abhishek Singh");
$scope.StudentName = studentfactory.displayName("David");
});
studentsApp.factory("studentfactory", function()
{
return {
displayName: function(name)
{
return "Hello from Factory Method : " + name;
}
});
studentsApp.service("studentService", function()
{
this.displayName = function(name)
{
return "Hello from Service Method : " + name;
};
});
}

HTML Code

<!DOCTYPE html>
<html ng-app="studentsModule">
<head>
<title></title>
<h2>Students Details</h2>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/StudentsJS.js"></script>
</head>
<body ng-controller="studentController">
<div >
First Message: {{message}}
</div>
<br />
<div>
{{Name}}
<br>
{{StudentName}}
</div>
</body>
</html>

Output

Difference between Factory and Service method

Services and Factories both are singletons and can be used to achieve the same functionality.

Factory

Factory is a function that returns an object explicitly. A factory is a simple function which allows you to add some logic before creating the object and also helps doing some configuration stuff or conditionally.
When the service instance requires complex creation logic.
When you need to work with an object, you could use the factory provider.

Service

When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service.
Should be used for simple creation logic.

Resource References

You can read more for the directive using API references of the angular website.

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all