AngularJS
v AngularJS is
a JavaScript framework.
v It is Used in
SPA (Single Page Application) Projects
v AngularJS is
Open Source.
v AngularJS is a structural framework for
dynamic web apps.
v It is a
library written in JavaScript.
v It can be
added to an HTML Page with a <script> tag.
v Use data-ng- instead of ng-
v AngularJS version 1.0 was released in
2012.
Library
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
AngularJS extends HTML with ng-directives.
v The ng-app
directive defines an AngularJS application.
v The ng-model
directive binds the value of HTML controls (input, select, text area) to
application data.
v The ng-bind
directive binds application data to the HTML view.
v The ng-init
directive initializes AngularJS application variables.
v The ng-controller
directive defines the controller.
v We can use data-ng-, instead of ng-
1. ng-app
<html ng-app=""> or <div ng-app="">
2. ng-model
<div ng-app="">
<p>Name: <input
type="text" ng-model="name"></p>
<p>Hello {{name}} </p>
</div>
3. ng-bind
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
4. ng-init
<div ng-app="" ng-init="firstName='John'">
<p>name is <span ng-bind="firstName"></span></p></div>
<p>name is <span ng-bind="firstName"></span></p></div>
OR
<div data-ng-app="" data-ng-init="firstName='John'">
<p>name is <span data-ng-bind="firstName"></span></p>
</div>
<p>name is <span data-ng-bind="firstName"></span></p>
</div>
OR
<div ng-app="" ng-init="quantity=1;
cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
OR
<div ng-app="" ng-init="person={firstName:'John',
lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
<p>The name is {{ person.lastName }}</p>
</div>
5. ng-Controller
<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>
Full Name: {{firstName +
" " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
6. ng-repeat
<div ng-app=""
ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in
names">
{{ x }}
</li>
</ul>
</div>
AngularJS
Expressions
v AngularJS expressions can be
written inside double braces: {{ expression }}.
v AngularJS expressions can
also be written inside a directive: ng-bind="expression".
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
OR
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
<p>The third result is {{ points[2] }}</p>
</div>
AngularJS
Module
var app = angular.module('myApp', []);
AngularJS
Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
$scope.firstName= "John";
$scope.lastName= "Doe";
});
OR
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
Angular JS Directives
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return
{
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Validation User Input
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email"
name="myAddress" ng-model="text">
<span
ng-show="myForm.myAddress.$error.email">Not a valid e-mail
address</span>
</form>
<p>Enter your e-mail address in the input field. AngularJS will
display an errormessage if the address is not an e-mail.</p>
</body>
</html>
OR
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName"
ng-model="myText" required>
</form>
<p>Edit the text field and it will get/lose classes according to the
status.</p>
<p><b>Note:</b> A text field with the
"required" attribute is not valid when it is empty.</p>
</body>
</html>
The ng-model directive adds/removes the following classes, according to
the status of the form field:
v
ng-empty
v
ng-not-empty
v
ng-touched
v
ng-untouched
v
ng-valid
v
ng-invalid
v
ng-dirty
v
ng-pending
v
ng-pristine
CSS Class
v ng-empty
v ng-not-empty
v ng-touched
v ng-untouched
v ng-valid
v ng-invalid
v ng-dirty
v ng-pending
v ng-pristine
AngularJS Scope
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
AngularJS
Filters
AngularJS provides filters to transform data:
currencyFormat a number to a currency format.dateFormat a date to a specified format.filterSelect a subset of items from an array.jsonFormat an object to a JSON string.limitToLimits an array/string, into a specified number of elements/characters.lowercaseFormat a string to lower case.numberFormat a number to a string.orderByOrders an array by an expression.uppercaseFormat a string to upper case.
UpperCase:
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
<p>The name is {{ lastName | uppercase }}</p>
</div>
Ordinary:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
No comments:
Post a Comment