AngularJS Tutorial

Toggle navigation
TUTORIAL HOME
AngularJS Tutorial
❮ Home Next ❯

AngularJS extends HTML with new attributes.

AngularJS is perfect for Single Page Applications (SPAs).

AngularJS is easy to learn.

Learn AngularJS now!
This Tutorial
This tutorial is specially designed to help you learn AngularJS as quickly and efficiently as possible.

First, you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers.

Then you will learn everything else you need to know about AngularJS:

Events, DOM, Forms, Input, Validation, Http, and more.

Examples in Every Chapter
In every chapter, you can edit the examples online, and click on a button to view the result.

AngularJS Example

Name :

Hello {{name}}

»
What You Should Already Know
Before you study AngularJS, you should have a basic understanding of:

HTML
CSS
JavaScript
AngularJS History
AngularJS version 1.0 was released in 2012.

Miško Hevery, a Google employee, started to work with AngularJS in 2009.

The idea turned out very well, and the project is now officially supported by Google.

AngularJS Examples
Omegas’ AngularJS tutorial contains lots of AngularJS examples!

AngularJS Examples

AngularJS Reference
The AngularJS reference contains all directives and filters used in this tutorial.

AngularJS Reference

❮ Home Next ❯

AngularJS Expressions

Toggle navigation
TUTORIAL HOME
AngularJS Expressions
❮ Previous Next ❯
AngularJS binds data to HTML using Expressions.

AngularJS Expressions
AngularJS expressions can be written inside double braces: {{ expression }}.

AngularJS expressions can also be written inside a directive: ng-bind=”expression”.

AngularJS will resolve the expression, and return the result exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example {{ 5 + 5 }} or {{ firstName + ” ” + lastName }}

Example

My first expression: {{ 5 + 5 }}

»
If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

Example

My first expression: {{ 5 + 5 }}

»
You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result.

Example: Let AngularJS change the value of CSS properties.

Change the color of the input box below, by changing its value:

{{myCol}}
Example

»
AngularJS Numbers
AngularJS numbers are like JavaScript numbers:

Example

Total in dollar: {{ quantity * cost }}

»
Same example using ng-bind:

Example

Total in dollar:

»
Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.

AngularJS Strings
AngularJS strings are like JavaScript strings:

Example
<div ng-app="" ng-init="firstName='John';lastName=’Doe'”>

The name is {{ firstName + ” ” + lastName }}

»
Same example using ng-bind:

Example
<div ng-app="" ng-init="firstName='John';lastName=’Doe'”>

The name is

»
AngularJS Objects
AngularJS objects are like JavaScript objects:

Example
<div ng-app="" ng-init="person={firstName:'John’,lastName:’Doe’}”>

The name is {{ person.lastName }}

»
Same example using ng-bind:

Example
<div ng-app="" ng-init="person={firstName:'John’,lastName:’Doe’}”>

The name is </span>

»
AngularJS Arrays
AngularJS arrays are like JavaScript arrays:

Example
<div ng-app="" ng-init="points=[1,15,19,2,40]”>

The third result is {{ points[2] }}

»
Same example using ng-bind:

Example
<div ng-app="" ng-init="points=[1,15,19,2,40]”>

The third result is </p>

»
AngularJS Expressions vs. JavaScript Expressions
Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.

Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.

AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

AngularJS expressions support filters, while JavaScript expressions do not.

Learn about JavaScript in our JavaScript Tutorial.

❮ Previous Next ❯

AngularJS Introduction

Toggle navigation
TUTORIAL HOME
AngularJS Introduction
❮ Previous Next ❯
AngularJS is a JavaScript framework. It can be added to an HTML page with a 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:

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.

AngularJS Example

Name:

»
Example explained:

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the

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 innerHTML of the

element to the application variable name.

AngularJS Directives
As you have already seen, AngularJS directives are HTML attributes with an ng prefix.

The ng-init directive initializes AngularJS application variables.

AngularJS Example

The name is </p>

»
Alternatively with valid HTML:

AngularJS Example
<div data-ng-app="" data-ng-init="firstName='John'”>

The name is </span>

»
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

You will learn a lot more about directives later in this tutorial.

AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS will “output” data exactly where the expression is written:

AngularJS Example

My first expression: {{ 5 + 5 }}

»
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.

AngularJS Example

Name:

»
You will learn more about expressions later in this tutorial.

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.

AngularJS Example

First Name:

Last Name:

Full Name: {{firstName + ” ” + lastName}}

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName= “John”;
$scope.lastName= “Doe”;
});

»
AngularJS modules define applications:

AngularJS Module
var app = angular.module(‘myApp’, []);
AngularJS controllers control applications:

AngularJS Controller
app.controller(‘myCtrl’, function($scope) {
$scope.firstName= “John”;
$scope.lastName= “Doe”;
});
You will learn more about modules and controllers later in this tutorial.

❮ Previous Next ❯

AngularJS Directives

Toggle navigation
TUTORIAL HOME
AngularJS Directives
❮ Previous Next ❯
AngularJS lets you extend HTML with new attributes called Directives.

AngularJS has a set of built-in directives which offers functionality to your applications.

AngularJS also lets you define your own 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 initializes application data.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

Read about all AngularJS directives in our AngularJS directive reference.

Example

Name:

You wrote: {{ firstName }}

»
The ng-app directive also tells AngularJS that the

element is the “owner” of the AngularJS application.

Data Binding
The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS binds AngularJS expressions with AngularJS data.

{{ firstName }} is bound with ng-model=”firstName”.

In the next example two text fields are bound together with two ng-model directives:

Example

Quantity:
Costs:

Total in dollar: {{ quantity * price }}

»
Using ng-init is not very common. You will learn how to initialize data in the chapter about controllers.

Repeating HTML Elements
The ng-repeat directive repeats an HTML element:

Example

{{ x }}

»
The ng-repeat directive actually clones HTML elements once for each item in a collection.

The ng-repeat directive used on an array of objects:

Example

{name:’Jani’,country:’Norway’},
{name:’Hege’,country:’Sweden’},
{name:’Kai’,country:’Denmark’}]”>

{{ x.name + ‘, ‘ + x.country }}

»
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 element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

The ng-init Directive
The ng-init directive defines initial values for 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.
Read more about the ng-model directive in the next chapter.

Create New Directives
In addition to all the built-in AngularJS directives, you can create your own directives.

New directives are created by using the .directive function.

To invoke the new directive, make an HTML element with the same tag name as the new directive.

When naming a directive, you must use a camel case name, w3TestDirective, but when invoking it, you must use – separated name, w3-test-directive:

Example

var app = angular.module(“myApp”, []);
app.directive(“w3TestDirective”, function() {
return {
template : “

Made by a directive!

“
};
});

»
You can invoke a directive by using:

Element name
Attribute
Class
Comment
The examples below will all produce the same result:

Element name

»
Attribute

»
Class

»
Comment

»
Restrictions
You can restrict your directives to only be invoked by some of the methods.

Example
By adding a restrict property with the value “A”, the directive can only be invoked by attributes:

var app = angular.module(“myApp”, []);
app.directive(“w3TestDirective”, function() {
    return {
        restrict : “A”,
        template : “

Made by a directive!

“
};
});
»
The legal restrict values are:

E for Element name
A for Attribute
C for Class
M for Comment
By default the value is EA, meaning that both Element names and attribute names can invoke the directive.

❮ Previous Next ❯

AngularJS Modules

Toggle navigation
TUTORIAL HOME
AngularJS Modules
❮ Previous Next ❯
An AngularJS module defines an application.

The module is a container for the different parts of an application.

The module is a container for the application controllers.

Controllers always belong to a module.

Creating a Module
A module is created by using the AngularJS function angular.module

…

var app = angular.module(“myApp”, []);

The “myApp” parameter refers to an HTML element in which the application will run.

Now you can add controllers, directives, filters, and more, to your AngularJS application.

Adding a Controller
Add a controller to your application, and refer to the controller with the ng-controller directive:

Example

var app = angular.module(“myApp”, []);

app.controller(“myCtrl”, function($scope) {
$scope.firstName = “John”;
$scope.lastName = “Doe”;
});

»
You will learn more about controllers later in this tutorial.

Adding a Directive
AngularJS has a set of built-in directives which you can use to add functionality to your application.

For a full reference, visit our AngularJS directive reference.

In addition you can use the module to add your own directives to your applications:

Example

var app = angular.module(“myApp”, []);

app.directive(“w3TestDirective”, function() {
    return {
        template : “I was made in a directive constructor!”
    };
});

»
You will learn more about directives later in this tutorial.

Modules and Controllers in Files
It is common in AngularJS applications to put the module and the controllers in JavaScript files.

In this example, “myApp.js” contains an application module definition, while “myCtrl.js” contains the controller:

Example

http://myApp.js
http://myCtrl.js

»
myApp.js
var app = angular.module(“myApp”, []);
The [] parameter in the module definition can be used to define dependent modules.

Without the [] parameter, you are not creating a new module, but retrieving an existing one.

myCtrl.js
app.controller(“myCtrl”, function($scope) {
$scope.firstName = “John”;
$scope.lastName= “Doe”;
});
Functions can Pollute the Global Namespace
Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.

AngularJS modules reduces this problem, by keeping all functions local to the module.

When to Load the Library
While it is common in HTML applications to place scripts at the end of the element, it is recommended that you load the AngularJS library either in the or at the start of the .

This is because calls to angular.module can only be compiled after the library has been loaded.

Example

var app = angular.module(“myApp”, []);
app.controller(“myCtrl”, function($scope) {
$scope.firstName = “John”;
$scope.lastName = “Doe”;
});

❮ Previous Next ❯

AngularJS Data Binding

Toggle navigation
TUTORIAL HOME
AngularJS Data Binding
❮ Previous Next ❯
Data binding in AngularJS is the synchronization between the model and the view.

Data Model
AngularJS applications usually have a data model. The data model is a collection of data available for the application.

Example
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstname = “John”;
$scope.lastname = “Doe”;
});
HTML View
The HTML container where the AngularJS application is displayed, is called the view.

The view has access to the model, and there are several ways of displaying model data in the view.

You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:

Example

»
You can also use double braces {{ }} to display content from the model:

Example

First name: {{firstname}}

»
Or you can use the ng-model directive on HTML controls to bind the model to the view.

The ng-model Directive
Use the ng-model directive to bind data from the model to the view on HTML controls (input, select, textarea)

Example

»
The ng-model directive provides a two-way binding between the model and the view.

Two-way Binding
Data binding in AngularJS is the synchronization between the model and the view.

When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

Example

Name:

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstname = “John”;
$scope.lastname = “Doe”;
});

»
AngularJS Controller
Applications in AngularJS are controlled by controllers. Read about controllers in the AngularJS Controllers chapter.

Because of the immediate synchronization of the model and the view, the controller can be completely separated from the view, and simply concentrate on the model data. Thanks to the data binding in AngularJS, the view will reflect any changes made in the controller.

Example

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
    $scope.firstname = “John”;
    $scope.changeName = function() {
        $scope.firstname = “Nelly”;
    }
});

❮ Previous Next ❯

AngularJS ng-model Directive

Toggle navigation
TUTORIAL HOME
AngularJS ng-model Directive
❮ Previous Next ❯
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-model Directive
With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.

Example

Name:

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.name = “John Doe”;
});

»
Two-Way Binding
The binding goes both ways. If the user changes the value inside the input field, the AngularJS property will also change its value:

Example

Name:

You entered: {{name}}

»
Validate User Input
The ng-model directive can provide type validation for application data (number, e-mail, required):

Example

    Email:

    <span ng-show="myForm.myAddress.$error.email”>Not a valid e-mail address

»
In the example above, the span will be displayed only if the expression in the ng-show attribute returns true.

If the property in the ng-model attribute does not exist, AngularJS will create one for you.

Application Status
The ng-model directive can provide status for application data (invalid, dirty, touched, error):

Example
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com‘”>
    Email:

Status

»
CSS Classes
The ng-model directive provides CSS classes for HTML elements, depending on their status:

Example

input.ng-invalid {
background-color: lightblue;
}

Enter your name:

»
The ng-model directive adds/removes the following classes, according to the status of the form field:

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

❮ Previous Next ❯

AngularJS Controllers

Toggle navigation
TUTORIAL HOME
AngularJS Controllers
❮ Previous Next ❯
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.

AngularJS Example

First Name:

Last Name:

Full Name: {{firstName + ” ” + lastName}}

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName = “John”;
$scope.lastName = “Doe”;
});

»
Application explained:

The AngularJS application is defined by ng-app=”myApp”. The application runs inside the

The ng-controller=”myCtrl” attribute is an AngularJS directive. It defines a controller.

The myCtrl function is a JavaScript function.

AngularJS will invoke the controller with a $scope object.

In AngularJS, $scope is the application object (the owner of application variables and functions).

The controller 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 (variables as functions):

AngularJS Example

First Name:

Last Name:

Full Name: {{fullName()}}

var app = angular.module(‘myApp’, []);
app.controller(‘personCtrl’, function($scope) {
    $scope.firstName = “John”;
    $scope.lastName = “Doe”;
    $scope.fullName = function() {
        return $scope.firstName + ” ” + $scope.lastName;
    };
});

»
Controllers In External Files
In larger applications, it is common to store controllers in external files.

Just copy the code between the tags into an external file named personController.js:

AngularJS Example

First Name:

Last Name:

Full Name: {{fullName()}}

</script>
»
Another Example
For the next example we will create a new controller file:

angular.module(‘myApp’, []).controller(‘namesCtrl’, function($scope) {
    $scope.names = [
        {name:’Jani’,country:’Norway’},
        {name:’Hege’,country:’Sweden’},
        {name:’Kai’,country:’Denmark’}
    ];
});
Save the file as namesController.js:

And then use the controller file in an application:

AngularJS Example

{{ x.name + ‘, ‘ + x.country }}

</script>
»

❮ Previous Next ❯

AngularJS Scope

Toggle navigation
TUTORIAL HOME
AngularJS Scope
❮ Previous Next ❯
The scope is the binding part between the HTML (view) and the JavaScript (controller).

The scope is an object with the available properties and methods.

The scope is available for both the view and the controller.

How to Use the Scope?
When you make a controller in AngularJS, you pass the $scope object as an argument:

Example
Properties made in the controller, can be referred to in the view:

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {
$scope.carname = “Volvo”;
});

»
When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties.

In the view, you do not use the prefix $scope, you just refer to a propertyname, like {{carname}}.

Understanding the Scope
If we consider an AngularJS application to consist of:

View, which is the HTML.
Model, which is the data available for the current view.
Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.

The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.

Example
If you make changes in the view, the model and the controller will be updated:

My name is {{name}}

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {
$scope.name = “John Doe”;
});

»
Know Your Scope
It is important to know which scope you are dealing with, at any time.

In the two examples above there is only one scope, so knowing your scope is not an issue, but for larger applications there can be sections in the HTML DOM which can only access certain scopes.

Example
When dealing with the ng-repeat directive, each repetition has access to the current repetition object:

{{x}}

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {
$scope.names = [“Emil”, “Tobias”, “Linus”];
});

»
Each

element has access to the current repetition object, in this case a string, which is referred to by using x.

Root Scope
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive.

The rootScope is available in the entire application.

If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.

Example
A variable named “color” exists in both the controller’s scope and in the rootScope:

The rootScope’s favorite color:

The scope of the controller’s favorite color:

The rootScope’s favorite color is still:

var app = angular.module(‘myApp’, []);
app.run(function($rootScope) {
$rootScope.color = ‘blue’;
});
app.controller(‘myCtrl’, function($scope) {
$scope.color = “red”;
});

»
❮ Previous Next ❯

AngularJS Services

AngularJS Services
❮ Previous Next ❯
In AngularJS you can make your own service, or use one of the many built-in services.

What is a Service?
In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

AngularJS has about 30 built-in services. One of them is the $location service.

The $location service has methods which return information about the location of the current web page:

Example
Use the $location service in a controller:

var app = angular.module(‘myApp’, []);
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
»
Note that the $location service is passed in to the controller as an argument. In order to use the service in the controller, it must be defined as a dependency.

Why use Services?
For many services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location object, and you could, but it would have some limitations, at least for your AngularJS application.

AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object.

The $http Service
The $http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.

Example
Use the $http service to request data from the server:

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $http) {
    $http.get(“welcome.htm”).then(function (response) {
        $scope.myWelcome = response.data;
    });
});
»
This example demonstrates a very simple use of the $http service. Learn more about the $http service in the AngularJS Http Tutorial.

The $timeout Service
The $timeout service is AngularJS’ version of the window.setTimeout function.

Example
Display a new message after two seconds:

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $timeout) {
    $scope.myHeader = “Hello World!”;
    $timeout(function () {
        $scope.myHeader = “How are you today?”;
    }, 2000);
});
»
The $interval Service
The $interval service is AngularJS’ version of the window.setInterval function.

Example
Display the time every second:

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});
»
Create Your Own Service
To create your own service, connect your service to the module:

Create a service named hexafy:

app.service(‘hexafy’, function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
To use your custom made service, add it as a dependency when defining the filter:

Example
Use the custom made service named hexafy to convert a number into a hexadecimal number:

app.controller(‘myCtrl’, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
»
Use a Custom Service Inside a Filter
Once you have created a service, and connected it to your application, you can use the service in any controller, directive, filter, or even inside other services.

To use the service inside a filter, add it as a dependency when defining the filter:

The service hexafy used in the filter myFormat:

app.filter(‘myFormat’,[‘hexafy’, function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
»
You can use the filter when displaying values from an object, or an array:

Create a service named hexafy:

{{x | myFormat}}

❮ Previous Next ❯

Design a site like this with WordPress.com

Get started

Tag: AngularJS

AngularJS Tutorial

Hello {{name}}

AngularJS Expressions

AngularJS Introduction

AngularJS Directives

Made by a directive!

Made by a directive!

AngularJS Modules

AngularJS Data Binding

{{firstname}}

{{firstname}}

AngularJS ng-model Directive

You entered: {{name}}

Status

AngularJS Controllers

AngularJS Scope

{{carname}}

My name is {{name}}

{{color}}

{{color}}

{{color}}

AngularJS Services