Angular JS

Angular JS
Introduction
Angular JS
AngularJS is a very powerful Javascript framework.
It is used to develop Single Page Application (SPA).
It extends HTML DOM with additional attributes and

makes it more responsive
Angular JS
AngularJS is open source, completely free

and used by thousands of the developers
around the world.
Angular JS
It is a open source web application

framework. It was originally developed in
2009 by Misko Hevery and Adam Abrons.
It is maintained by Google.
The current version is 1.2.21/1.3.x

Why Angular JS
It is used to create Rich Internet

Applications (RIA).
It provides developers options to write

client side applications using Javascript in a
clean Model and View (MVC) architecture.
Why Angular JS
Applications written in AngularJS are cross-

browser compliant. AngularJS automatically
handles Javascript code suitable for each
browser.
Overall AngularJS is a framework to build large

scale, high performance, and easy to maintain
web applications.
Hello World Example in AngularJS
<html>
<head>
<title>AngularJS First Application</title> </head> <body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name:
<input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p> </div>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/ang
ular.min.js">
</script> </body> </html>
Core Features
Data Binding – It is the automatic synchronization

of data between model and view components
Controllers – These are Javascript functions bound

to a particular scope
Services- AngularJS comes with several built-in

services such as $http to make XMLHttpRequests.
Core Features
Filters – These select a subset of items as an arrays and

returns as new array.
Directives – These are markers on DOM elements such

as attributes, css, and more.
These can be used to create custom HTML tags
Templates – These are rendered view with information

from the controller and view.
Core Features
Routing – It is the concept of switching

views.
Dependency Injection − AngularJS has a

built-in dependency injection subsystem
that helps the developer to create,
understand, and test the applications easily.
AngularJS Directives
The AngularJS framework can be divided into three

major parts:
ng-app: This directive defines and links an AngularJS

application to HTML.
ng-model: This directive binds the values of AngularJS

application data to HTML input controls.
ng-bind: This directive binds the AngularJS application

data to HTML tags.
Setting up Development Environment
Navigate to AngularJS official website

https://angularjs.org/,
AngularJS Installation
This screen gives various options of using
Angular JS as follows −
Downloading and hosting files locally
There are two different options :
Legacy and Latest.
The names themselves are self-descriptive. The
Legacy has version less than 1.2.x and the Latest
come with version 1.3.x.
We can also go with the minimized, uncompressed,
or zipped version.
CDN access − You also have access to a CDN.
The CDN gives you access to regional data centers. In

this case, the Google host.
The CDN transfers the responsibility of hosting files

from your own servers to a series of external ones. It
also offers an advantage that if the visitor of your web
page has already downloaded a copy of AngularJS from
the same CDN, there is no need to re-download it.
AngularJS first example
<!doctype html>
<html> <head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.
min.js"></script> </head>
<body ng-app = “myapp”>
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} PES University !</h2> </div>
<script> angular.module("myapp",
[]) .controller("HelloController", function($scope)
{ $scope.helloTo = {}; $scope.helloTo.title = “krish”; }); </script>
</body> </html>
Include AngularJS
<script src =
"https://ajax.googleapis.com/ajax/libs/angular
js/1.5.2/angular.min.js"></script>
HTML that includes angular app

<body ng-app = “myapp”> </body>
View
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} PES University !</h2>
</div>
Controller
<script> angular.module("myapp",
[]) .controller("HelloController", function($scope)
{ $scope.helloTo = {}; $scope.helloTo.title =
“krish”; }); </script>
What happens when the page is loaded in the browser ?
A. HTML document is loaded into the browser, and evaluated

by the browser.
B. AngularJS JavaScript file is loaded, the

angular global object is created.
C. The JavaScript which registers controller functions is

executed.
D. Next, AngularJS scans through the HTML to search for
AngularJS apps as well as views.
E. Once the view is located, it connects that view to the

corresponding controller function.
F. Next, AngularJS executes the controller functions.
G. It then renders the views with data from the model

populated by the controller. The page is now ready.
AngularJS application
Step 1: Load framework
Being a pure JavaScript framework, it can be added
using <Script> tag.
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.
14/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>
Expressions
Expressions are used to bind application data to HTML.
Expressions are written inside double curly braces such as in

{{ expression}}.
Expressions behave similar to ngbind directives. AngularJS

expressions are pure JavaScript expressions and output the
data where they are used.
Expressions
Using numbers
<p>Expense on Books : {{cost * quantity}} Rs</p>
Using Strings
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
Using Object
<p>Roll No: {{student.rollno}}</p>
Expressions
Using Array
<p>Marks(Math): {{marks[3]}}</p>
Tables
Table data is generally repeatable. The ng-repeat directive can
be used to draw table easily. The following example shows the
use of ng-repeat directive to draw a table −
<table>
<tr> <th>Name</th> <th>Marks</th> </tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td> </tr>
</table>
Tables
Table can be styled using CSS Styling.
<style> table, th , td { border: 1px solid grey; border-collapse:
collapse; padding: 5px; }
table tr:nth-child(odd) { background-color: #f2f2f2; }

table tr:nth-child(even) { background-color: #ffffff; } </style>
Custom Filters in AngularJS
Sometimes the built-in filters in Angular cannot meet the
needs or requirements for filtering output.
In such a case, an AngularJS custom filter can be created,

which can pass the output in the required manner.
Similarly, for numbers, you can use other filters. During this
tutorial, we will see the different standard built-in filters
available in Angular.
Custom Filters in AngularJS
Directives in AngularJS
A Directive in AngularJS is a command that gives HTML new
functionality.
When Angular go through HTML code, it will first find

directives in the page and then parse HTML in the page
accordingly.
A simple example of AngularJS directive, which we have seen

in our previous examples is ng-model directive
The directives are used to bind our data model to our view.
The business logic for few programming constructs can be

designed using controllers, but this comes as next level.
Without using controllers, we can have basic angular code of
HTML page with directives like
ng-init, ng-repeat and ng-model

There are 4 directives in AngularJS
1. ng-app
2. ng-init
3. ng-model
4. ng-repeat
ng-app: This is used to initialize Angular JS application.

When this directive is placed in HTML page, it basically tells
Angular that this page is Angular.js application
ng-init:
This is used to initialize application data. Sometimes, you may
require some local data for your applications, this can be done
with ng-init directive.
ng-model:
The ng-model directive is used to bind the value of HTML
control to application data.
ng-repeat
This is used to repeat an HTML element.
Directives (ng-app)
Directives (ng-init)
Directives (ng-model)
Directives (ng-repeat)
Event Handling in AngularJs
AngularJS events are the functionalities that allow web
applications to interact with user inputs like mouse click,
keyboard inputs, mouse hover etc.
Events need to be handled in web-based applications in order

to perform tasks and actions. It is triggered when a specific
action is performed by the user.
When creating web-based applications, sooner or later your
application will need to handle DOM events like mouse clicks,
moves, keyboard presses, change events, etc.
AngularJS can add functionality which can be used to handle

such events.
For example, if there is a button on the page and you want to

process something when the button is clicked, we can use the
Angular ng-click event directive.
The different event handling directives in AngularJS are
ng-click
ng-hide
ng-show

Angular JS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular JS

Uploaded by

Copyright:

Available Formats

Angular JS

AngularJS is a very powerful Javascript framework.

It is used to develop Single Page Application (SPA).

It extends HTML DOM with additional attributes and

AngularJS is open source, completely free

It is a open source web application

The current version is 1.2.21/1.3.x

It is used to create Rich Internet

It provides developers options to write

Applications written in AngularJS are cross-

Overall AngularJS is a framework to build large

Data Binding – It is the automatic synchronization

Controllers – These are Javascript functions bound

Services- AngularJS comes with several built-in

Filters – These select a subset of items as an arrays and

Directives – These are markers on DOM elements such

Templates – These are rendered view with information

Routing – It is the concept of switching

Dependency Injection − AngularJS has a

The AngularJS framework can be divided into three

ng-app: This directive defines and links an AngularJS

ng-model: This directive binds the values of AngularJS

ng-bind: This directive binds the AngularJS application

Navigate to AngularJS official website

The CDN gives you access to regional data centers. In

The CDN transfers the responsibility of hosting files

HTML that includes angular app

A. HTML document is loaded into the browser, and evaluated

B. AngularJS JavaScript file is loaded, the

C. The JavaScript which registers controller functions is

E. Once the view is located, it connects that view to the

F. Next, AngularJS executes the controller functions.

G. It then renders the views with data from the model

Step 3: Define a model name using ng-model

Expressions are written inside double curly braces such as in

Expressions behave similar to ngbind directives. AngularJS

table tr:nth-child(odd) { background-color: #f2f2f2; }

In such a case, an AngularJS custom filter can be created,

When Angular go through HTML code, it will first find

A simple example of AngularJS directive, which we have seen

The business logic for few programming constructs can be

ng-init, ng-repeat and ng-model

ng-app: This is used to initialize Angular JS application.

Events need to be handled in web-based applications in order

AngularJS can add functionality which can be used to handle

For example, if there is a button on the page and you want to

You might also like