Advanced Web Development

subject code:202046701
Unit-2

Prepared By:Prof.Khushali Patel

Assistant Professor (IT)
A D Patel Institute of Technology
Unit-2
What is AngularJS

 Angular JS is an open source JavaScript framework that is used to build web

applications. It can be freely used, changed and shared by anyone.
 AngularJS was originally started as a project in 2011 by Google but now, it is
open- source framework.It also known as Angular1
 It extends the HTML by adding built-in attributes and components and
provides an ability to create custom attributes using simple JavaScript and
makes it dynamic.
 AngularJS is entirely based on HTML and JavaScript, so there is no need to
learn another syntax or language.
 AngularJS can be used to create Single Page Applications
AngularJS Features

1.Angular JS supports two-way binding

2. Angular JS supports MVC concept
3. Angular JS supports routing
4.Angular JS provides dependency injection
5. Testing is also very easy in Angular JS
Advantage of AngularJS
 why to use Angular JS.
 Dependency Injection: Dependency Injection specifies a design pattern in
which components are given their dependencies instead of hard coding them
within the component.
 Two way data binding: AngularJS creates a two way data-binding between
the select element and the orderProp model. orderProp is then used as the
input for the orderBy filter.
 Testing: Angular JS is designed in a way that we can test right from the start.
So, it is very easy to test any of its components through unit testing and end-
to-end testing.
 Model View Controller: In Angular JS, it is very easy to develop application in
a clean MVC way. You just have to split your application code into MVC
components i.e. Model, View and the Controller.
 Directives, filters, modules, routes etc.
Setup AngularJS Development
Environment

AngularJS website -
https://angularjs.io

https://angularjs.org/
3
Setup AngularJS Development Environment

 We need the following tools to setup a

development environment for AngularJS:
• AngularJS Library
• Editor/IDE
• Browser
• Web server
AngularJS Library
Editor
• AngularJS is eventually HTML and JavaScript code. So,
you can install any good editor/IDE as per your choice.

• The following editors are recommended:

• Sublime Text
• Aptana Studio 3
• Ultra Edit
• Eclipse
• Visual Studio
WebServer & Browser

• Use any web server such as IIS, apache etc., locally for
development purpose.

• You can install any browser of your choice as AngularJS

supports cross-browser compatibility.
• However, it is recommended to use Google Chrome
while developing an application
AngularJS MVC Architecture
 MVC stands for Model View Controller. It is a software design pattern for
developing web applications. It is very popular because it isolates the
application logic from the user interface layer and supports separation of
concerns.
 The MVC pattern is made up of the following three parts:
 Model: It is responsible for managing application data. It responds to the
requests from view and to the instructions from controller to update itself.
 View: It is responsible for displaying all data or only a portion of data to the
users. It also specifies the data in a particular format triggered by the
controller's decision to present the data. They are script-based template
systems such as JSP, ASP, PHP and very easy to integrate with AJAX
technology.
 Controller: It is responsible to control the relation between models and
views. It responds to user input and performs interactions on the data model
objects. The controller receives input, validates it, and then performs
business operations that modify the state of the data model.
First AngularJS Application
• An AngularJS application consists of following three main parts:

• ng-app− Defines and links application to HTML.

• ng-model− Binds the values of application data to HTML input controls.
• ng-bind− Binds the Application data to HTML tags.
ng-app directive
ng-app directive is the beginning directive of angularJS.

It is used to auto bootstrap angularJS application.

We generally use this directive at root level like inside html tag or in body tag.

When angularjs application loads, it will first search for ng-app directives.
ng-model directive

Ng-model is used to bind input fields, select and textarea with model
and we can use this model in page.

Ng-model provides the facility of two-way data binding.

ng-bind
<!DOCTYPE html>
We have used binding <html lang="en">
<head>
expression to bind the <script
src="https://ajax.googleapis.com/ajax/libs/angu
model data. larjs/1.8.2/angular.min.js"></script>
</head>
<body data-ng-app>
<input type="text" data-ng-model="t1">
We can also use ng-bind to <span
ng-bind="t1.toUpperCase()"></span>
show model data in </body>
</html>
application
Steps to create AngularJS
Step 1 − Load framework- using <Script> tag.
• <script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
Step 2 − Define AngularJS Application using ng-app directive
• <div ng-app = ""> ... </div>
Step 3 − Define a model name using ng-model directive
• <p>Enter your Name: <input type = "text" ng-model = "name"></p>
Step 4 − Bind the value of above model defined using ng-bind directive.
• <p>Hello <span ng-bind = "name"></span>!</p>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/
angular.min.js">
</script>

AngularJ <body>

<div ng-app="">
S <p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

Example </div>

</body>
</html>
• AngularJS starts automatically when the web
page has loaded.
• The ng-app directive tells AngularJS that
AngularJ the
<div> element is the "owner" of an AngularJS
S application.
• The ng-model directive binds the value of the
Example input field to the application variable name.

Explaine • The ng-bind directive binds the innerHTML of

the <p> element to the application

d variable name.
• ng-app directive indicates the start of
AngularJS application.

How • ng-model directive then creates a model

variable named "name" which can be
AngularJS used with the html page and within the div
having ng-app directive.
integrates • ng-bind then uses the name model to be
displayed in the html span tag whenever
with user input something in the text box.

HTML • Closing </div> tag indicates the end of

AngularJS application.
• Expressions are used to bind application data to html.
• Expressions are written inside double braces like
• {{ expression}}.
• Expressions behaves in same way as ng-bind directives.

AngularJS • Using numbers

• <p>Expense on Books : {{cost * quantity}} Rs</p>
Expression • Using strings
• <p>Hello {{fname+ “ “ +lname
s }}</p>
• Using object
• <p>Roll No: {{student.rollno}}</p>
• Using array
• <p>Marks(Math): {{marks[3]}}</p>
• This datatype is just like
JavaScript datatype and operators
the
AngularJ could be used to display results.

S <div ng-app=“”>
<p>The value of 5 times 10 is : {{5*10}}<p>
Numbers </div>
• Strings can be initialized using ng-init directive or ng-
controller directive.
• The concatenation of strings is also possible when the +
operator is used within the expression.
• Strings also could be used as expressions within double

AngularJ curly braces or use ng-bind directive just like

the AngularJS numbers.

S <div ng-app=“” ng-init=“first string variable name=’your

Strings first string’; second string variable name =’your second

string’”>
<p>My first string expression in Angular JS: {{ first string
variable name + second string variable name }}</p>
</div>
• AngularJS objects behave the same way
in which the JavaScript objects
behave.
• The items within an object could be accessed
using the dot operator.

<div ng-app=”” ng-init=”your

AngularJ object name=
name=’your
{first
first
variable
value’,second
S variable
value’}”>
name =’your second

Objects <p>My first object in Angular

JS: {{ your object name.second
variable name }}</p>
</div>
• AngularJS arrays behave the same way in
which the JavaScript arrays behave.
• The items within an array could be accessed by
AngularJ denoting the value’s index number
within square braces.
S • Please remember that the indexing starts from
zero always, in an array, i.e., Array element 1
Arrays = index 0.
• Array element 2 = index 1 and so on.
<div ng-app=”” ng-init=”your array name=[your
AngularJ first value,your second value]”>
<p>My first array in Angular JS: {{ your array
S name[1] }}</p>
</div>
Arrays
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angular
js/1.8.2/angular.min.js"></script>
AngularJS <body>

Expressions <div ng-app="">

Example <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
• AngularJS application mainly relies on controllers to
control the flow of data in the application.
• A controller is defined using ng-controller directive.
• Each controller accepts $scope as a parameter which
AngularJS refers to the application/module that controller is to
control.
Controllers • Syntax:
<div ng-app = "" ng-controller = "controller_name">
//code
</div>
• Example:

<div ng-app="myApp" ng-controller="myCtrl">

• Module is a container for various parts of your
applications - controller, services, filters,
directive, etc.
• Array [] passed in above example is the list of
AngularJ modules app depends on, if there are no
dependencies then we pass
S • Empty Array i.e. [].
• A controller can be defined as an application
Controller module.
• Syntax:
s angular.module("myapp", [])
.controller("appController",
(Module) function($scope) {
// definition of controller
} );
AngularJS • A controller can be defined as
Controllers JavaScript Function.

(JavaScript • Syntax:
Function) function controllerAsFunction($scope){
//definition of controller
}
AngularJS Controllers Example

5. Use property created

1. Specify
inside controller
Controller using
ng-controller

2. Create an App
Module

3. Create a 4. Attach a property to

controller $scope
• <div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-
model="firstName"><br>
Last Name: <input type="text" ng-

AngularJS model="lastName"><br>
Full Name: {{firstName + " " +
lastName}}
Controllers </div>

Example • <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= ”Rambo";
});
Restrictions on Controller in
AngularJS
• Following are the scenarios where a controller can’t be used:
• Sharing code or state across
• Filtering output – Instead, there are various built-in filters by AngularJS as
well as custom filters.
• Manipulating DOM (Document Object Model) – Data binding or directives
exist for this purpose.
• Formatting input – Angular form controls are there for formatting
purposes.
Example: Handle Button Click

Attach
Behavio
r

showMsg() function is attached to

the scope object
Example: Attach an object

Attach
Object

student object is attached to the

$scope
Example: Nested Controller

Nested
Controller
s
Difference between AngularJS
Expressions and JavaScript Expressions
AngularJS Expressions JavaScript Expressions
• AngularJS expressions can be written • JavaScript expressions cannot be
inside HTML. written inside HTML.

• Do not support conditionals, loops, • Support conditionals, loops, and

and exceptions exceptions

• Support filters • Does not support filters

• Contain literals, operators, and • Contain literals, operators, and
variables. variables.
ng-repeat
Ng-repeat is one of the directive in angularjs.

It is used to looping the given object or array.

When we need to display the set of html in repeated mode with

some data or collection then we can use ng-repeat directive.
Ng-init directive is used to initialize
a variable, which will allows
evaluating an expression in given
scope.

According to angular official

document, this directive is abused
ng- as it adds unnecessary business
init logic in the application.

Still to evaluate an expression we

required that directive.
ng-hide and ng-show

These both directives ng-

show and ng-hide are Both directives take true
used to manage the and false value to display
visibility of html controls. or hide the html control.
ng-if

Ng-if directive is condition-based directive which removes or

recreates the DOM portion according to condition.

It evaluates expression as true or false.

If ng-if evaluates to a false it will remove from the DOM element

and if it is true, then element is reinserted into the DOM.
Scope in AngularJS
• The $scope in an AngularJS is a built-in object, which contains application data
and methods.
• You can create properties to a $scope object inside a controller function
and assign a value or function to it.
• The $scope is glue between a controller and view (HTML).
• It transfers data from the controller to view and vice-versa.

View Scope Controller

Scope in AngularJS
• 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.
• With the nested controller, child controller will inherit the parent controller's
scope object.
• Therefore, child controller can access properties added in parent controller, but
parent controller cannot access properties added in child controller.
• An AngularJS application has a
single
$rootScope.
• All the other $scope objects are child
$rootScope objects.
• The properties and methods attached
to $rootScope will be available to all the
controllers.
$scope object methods
Method Description
$new() Creates new child scope.
$watch() Register a callback to be executed whenever model property changes.
$watchGroup() Register a callback to be executed whenever model properties changes.
Here, specify an array of properties to be tracked.
$watchCollection() Register a callback to be executed whenever model object or array
property changes.
$digest() Processes all of the watchers of the current scope and its children.
$destroy() Removes the current scope (and all of its children) from the parent scope.
$scope object methods

Method Description
$eval() Executes the expression on the current scope and returns the
result.
$apply() Executes an expression in angular outside the angular framework.

$on() Register a callback for an event.

$emit() Dispatches the specified event upwards till $rootScope.
$broadcast() Dispatches the specified event downwards to all child scopes.
Definition: Nested controllers in
AngularJS allow developers to create
a hierarchy or parent-child
relationship between controllers
Nested within an application.

Controllers Use Case: This feature enables a

more organized and structured
codebase, facilitating better code
separation and modularity.
AngularJS
Scope
Inheritance
• Scope is basically controller
specific.
• Whenever we nest a controller,
that means to declare a
controller inside a controller
then the child controller
inherits the scope of the
parent controller.
Definition: AngularJS follows a scope
inheritance model, where child
controllers inherit the scope of their
parent controllers.
Scope
Inheritance How It Works: Child controllers gain
access to the variables and functions
defined in their parent controllers'
scope, creating a natural and efficient
way to share data between controllers.