Scribd
Upload
32 views

Angular JS

Uploaded by

sreenu_pes
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views

Angular JS

Uploaded by

sreenu_pes
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

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.
AngularJS Installation
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>
AngularJS Installation
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>
AngularJS Installation
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>
AngularJS first example
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.
AngularJS first example
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>
AngularJS application
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>
AngularJS application
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.
Directives in AngularJS

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


Directives in AngularJS
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
Directives in AngularJS
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.
Event Handling in AngularJs
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.
Event Handling in AngularJs
The different event handling directives in AngularJS are

ng-click
ng-hide
ng-show

You might also like