Angular Javascript Tutorial with command

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/angular
.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/,

Angular Javascript Tutorial with command

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.mi
n.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.

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.

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 Javascript Tutorial with command

More Related Content

Similar to Angular Javascript Tutorial with command (20)

Recently uploaded (20)

Angular Javascript Tutorial with command