AngularJS Tutorial
AngularJS extends HTML with new attributes
AngularJS is perfect for SPAs (Single Page Applications)
AngularJS is easy to learn
Try it Yourself Examples in Every Chapter
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
What You Should Already Know
Before you study AngularJS, you should have a basic understanding of:
AngularJS 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.
AngularJS is a JavaScript Framework
AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/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.
Example explained: AngularJS starts automatically when the web page has loaded.
The
ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS
application.
The
ng-model directive binds the value of the input field to the application variable
name.
The
ng-bind directive binds the
innerHTMLof the <p> element to the application variable
name.
| | You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid. |
AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS expressions bind data to HTML the same way as the ng-bind directive.
AngularJS will "output" data exactly where the expression is written.
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS Directives
AngularJS lets you extend HTML with new attributes called Directives.
AngularJS Directives
AngularJS directives are extended HTML attributes with the prefix
ng-.
The
ng-app directive initializes an AngularJS application.
The
ng-init directive initialize application data.
The
ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
Data Binding
The {{ firstName }}expression, in the example above, is an AngularJS data binding expression.
Data binding in AngularJS, synchronizes AngularJS expressions with AngularJS data.
{{ firstName }} is synchronized with ng-model="firstName".
| AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database. |
Repeating HTML Elements
The ng-repeat directive repeats an HTML element:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
</body>
</html>
| | AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database. |
The ng-app Directive
The
ng-app directive defines the
root elementof an AngularJS application.
The
ng-app directive will
auto-bootstrap(automatically initialize) the application when a web page is loaded.
Later you will learn how
ng-app can have a value (like ng-app="myModule"), to connect code modules.
The ng-init Directive
The
ng-init directive defines
initial valuesfor an AngularJS application.
Normally, you will not use ng-init. You will use a controller or module instead.
You will learn more about controllers and modules later.
The ng-model Directive
The
ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The
ng-model directive can also:
- Provide type validation for application data (number, email, required).
- Provide status for application data (invalid, dirty, touched, error).
- Provide CSS classes for HTML elements.
- Bind HTML elements to HTML forms.
The ng-repeat Directive
The
ng-repeat directive
clones HTML elementsonce for each item in a collection (in an array).
AngularJS Controllers
AngularJS controllers control the data of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.
AngularJS Controllers
AngularJS applications are controlled by controllers.
The
ng-controller directive defines the application controller.
A controller is a
JavaScript Object, created by a standard JavaScript
object constructor.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="personController">
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>
function personController($scope) {
$scope.firstName = "Kumar",
$scope.lastName = "Suresh"
}
</script>
</body>
</html>
Application explained:
The AngularJS application is defined by ng-app. The application runs inside a <div>.
The ng-controller directive names the controller object.
The personController function is a standard JavaScript object constructor.
AngularJS will invoke personController with a $scope object.
In AngularJS, $scope is the application object (the owner of application variables and functions).
The personController creates two properties (variables) in the scope (firstName and lastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).
Controller Methods
The example above demonstrated a controller object with two properties: lastName and firstName.
A controller can also have methods (functions as object properties):
AngularJS Filters
Filters can be added to expressions and directives using a pipe character.
AngularJS Filters
AngularJS filters can be used to transform data:
| Filter | Description |
| currency | ------Format a number to a currency format. |
| Filter | ------Select a subset of items from an array. |
| lowercase | ------Format a string to lower case. |
| orderBy | ------Orders an array by an expression. |
| uppercase | ------Format a string to upper case. |
Adding Filters to Expressions
A filter can be added to an expression with a pipe character (|) and a filter.
(For the next two examples we will use the person controller from the previous chapter)
The
uppercase filter format strings to upper case:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="personController">
<p>The name is {{ lastName | uppercase }}</p>
</div>
<script src="personController.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="personController">
<p>The name is {{ lastName | lowercase }}</p>
</div>
<script src="personController.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="costController">
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
<script>
function costController($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="namesController">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="namesController">
<p>Filtering input:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>
