Angular js PPT

Introduction
• AngularJS is a JavaScript framework. It
can be added to an HTML page with a
<script> tag.
• AngularJS extends HTML attributes
with Directives, and binds data to HTML
with Expressions.
• <script
src="https://ajax.googleapis.com/ajax/libs/angul
arjs/1.4.8/angular.min.js">
</script>

AngularJS Extends HTML
• AngularJS extends HTML with ng-directives.
• The ng-app directive defines an AngularJS
application.
• The ng-model directive binds the value of
HTML controls (input, select, textarea) to
application data.
• The ng-bind directive binds application data to
the HTML view.

Demo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angu
larjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

AngularJS Directives
• The ng-init directive initializes AngularJS
application variables.
Example:-
<div ng-app="" ng-init="firstName='John'">
<p>The name is
<span bind="firstName"></span>
</p>
</div>

AngularJS Expressions
• AngularJS expressions are written inside
double braces: {{ expression }}.
• AngularJS will "output" data exactly where the
expression is written.
Example:-
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>

AngularJS Applications
• AngularJS modules define AngularJS
applications.
• AngularJS controllers control AngularJS
applications.
• The ng-app directive defines the application,
the ng-controller directive defines the
controller.

Demo
• <div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

AngularJS Filters
• currency: Format a number to a currency
format.
• date: Format a date to a specified format.
• filter: Select a subset of items from an array.
• json: Format an object to a JSON string.
• lowercase: Format a string to lower case.
• uppercase: Format a string to upper case.

Adding Filters to Expressions
• Filters can be added to expressions by using the
pipe character |, followed by a filter.
Example:
<div ng-
app="myApp" ngcontroller="personCtrl">
<p>The name is {{ 1+2 | currency }}</p>
</div>

Events
• ng-click
• ng-mouseover
• ng-dblclick
• ng-change
• ng-paste
• ng-mousemove

Example of ng-mouseover:
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemover="count = count + 1">Mouse Over Me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

Shopping Cart App
Step 1:create a list of item
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Mobile", "Lappy", "Tablet"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>

Step 2: Adding an item to the List
<script>
$scope.products = ["Mobile", “Lappy, “Tablet];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>

Step 3: Removing an item
<script>
$scope.products = ["Mobile", “Lappy", “Tablet"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<ul>
<li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>

Angular js PPT

More Related Content

What's hot (20)

Similar to Angular js PPT (20)

More from Imtiyaz Ahmad Khan (6)

Recently uploaded (20)

Angular js PPT