<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<p ng-bind="name"></p>
</div>
Note: ng-bind="name" is same as {{name}}
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS will "output" data exactly where the expression is written:
</body>
</html>
Try it Yourself »
AngularJS is distributed as a JavaScript file, and can be added to a web page
with a script tag:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
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.
AngularJS Example
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>
Try it Yourself »
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 content of the <p> element to the application variable name.
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
<div ng-app=" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Try it Yourself »
Alternatively with valid HTML:
AngularJS Example
<div data-ng-app=" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Try it Yourself »
You can use data-ng-, instead of ng-, if
you want to make your page HTML valid.
AngularJS Example
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Try it Yourself »
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind
directive.
AngularJS Example
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app=">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Try it Yourself »
You will learn more about expressions later in this tutorial.
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
<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>
Try it Yourself »
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.
AngularJS binds data to HTML using Expressions.
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 will "output" data 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
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Try it Yourself »
If you remove the ng-app directive, HTML will display the
expression as it is, without solving it:
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Try it Yourself »
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:
<div ng-app=" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Try it Yourself »
Same example using ng-bind:
Example
<div ng-app=" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Try it Yourself »
Using ng-init is not very common. You will learn a better way to initialize data
in the chapter about controllers.
Strings
AngularJS strings are like JavaScript strings:
Example
<div ng-app=" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Try it Yourself »
Same example using ng-bind:
Example
<div ng-app=" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Try it Yourself »
Objects
AngularJS objects are like JavaScript objects:
Example
<div ng-app=" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Try it Yourself »
Same example using ng-bind:
Example
<div ng-app=" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Try it Yourself »
Arrays
AngularJS arrays are like JavaScript arrays:
Example
<div ng-app=" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Try it Yourself »
Same example using ng-bind:
Example
<div ng-app=" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Try it Yourself »
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.
Creating a Module
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.
A module is created by using the AngularJS function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
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
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Try it Yourself »
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
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Try it Yourself »
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:
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.
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
<body> element, it is recommended that you load the AngularJS library either in
the <head> or at the start of the <body>.
This is because
calls to angular.module can only be compiled after the library has been loaded.
Example
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>
Try it Yourself »
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.
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
<div ng-app=" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Try it Yourself »
The ng-app directive also tells AngularJS that the <div> 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
<div ng-app=" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>Try it Yourself »
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
<div ng-app=" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Try it Yourself »
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
<div ng-app=" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Try it Yourself »
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
<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> Try it Yourself »
You can invoke a directive by using:
Element name
Attribute
Class
Comment
The examples below will all produce the same result:
Element name
<w3-test-directive></w3-test-directive> Try it Yourself »
Attribute
<div w3-test-directive></div> Try it Yourself »
Class
<div class="w3-test-directive"></div> Try it Yourself »
Comment
<!-- directive: w3-test-directive --> Try it Yourself »
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 : "<h1>Made by a directive!</h1>"
};
});
Try it Yourself »
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.
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.
The ng-model directive can provide type validation for application data (number,
e-mail, required):
Example
<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>
Try it Yourself »
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 (valid,
dirty, touched, error):
The ng-model directive provides CSS classes for HTML elements, depending
on their status:
Example
<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>
Try it Yourself »
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
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.
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
<p ng-bind="firstname"></p> Try it Yourself »
You can also use double braces {{}} to display content
from the model:
Example
<p>First name: {{firstname}}</p> Try it Yourself »
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
<input ng-model="firstname"> Try it Yourself »
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.
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
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
Try it Yourself »
AngularJS controllers control the data of AngularJS
applications.
AngularJS controllers are regular JavaScript Objects.
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
<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>
Try it Yourself »
Application explained:
The AngularJS application is defined by ng-app="myApp". The application
runs inside the <div>.
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):
In larger applications, it is common to store controllers in
external files.
Just copy the code between the <script> tags into an external file named
personController.js:
AngularJS Example
<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 src="personController.js"></script>
Try it Yourself »
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
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
Try it Yourself »
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:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.carname
= "Volvo";
});
</script>
Try it Yourself »
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 property name, 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:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
Try it Yourself »
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:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.names
= ["Emil", "Tobias", "Linus"];
});
</script>
Try it Yourself »
Each <li> 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 uses the one in the current scope.
Example
A variable named "color" exists in both the controller's scope and in the
rootScope:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body>Try it Yourself »
Filters can be added in AngularJS to format data.
Filters
AngularJS provides filters to transform data:
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.
limitTo Limits an array/string, into a specified number of elements/characters.
lowercase Format a string to lower case.
number Format a number to a string.
orderBy Orders an array by an expression.
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.
The uppercase filter format strings to upper case:
Example
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Try it Yourself »
The lowercase filter format strings to lower case:
Example
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Try it Yourself »
Adding Filters to Directives
Filters are added to directives, like ng-repeat, by using the pipe character
|, followed by a filter:
Example
The orderBy filter sorts an array:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Try it Yourself »
The filter filter selects a subset of an array.
The filter filter can only be used on arrays, and it returns an
array containing only the matching items.
Example
Return the names that contains the letter "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Try it Yourself »
Read more about the filter filter in our AngularJS
filter Filter Reference
Filter an Array Based on User Input
By setting the ng-model directive
on an input field, we can use the value of the input field as an expression in a
filter.
Type a letter in the input field, and the list will shrink/grow depending on the match:
{{ x }}
Example
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
Try it Yourself »
Sort an Array Based on User Input
Click the table headers to change the sort order::
Name
Country
{{x.name}}
{{x.country}}
By adding the ng-click directive on the table headers, we can run a function that changes the sorting order of the array:
You can make your own filters by registering a new filter factory function with
your module:
Example
Make a custom filter called "myFormat":
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat}}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter('myFormat',
function() {
return function(x) {
var i, c, txt = ";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
Try it Yourself »
The myFormat filter will format every other character to uppercase.
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();
});
Try it Yourself »
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;
});
});
Try it Yourself »
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);
});
Try it Yourself »
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);
});
Try it Yourself »
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 controller:
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);
});
Try it Yourself »
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);
};
}]);
Try it Yourself »
You can use the filter when displaying values from an object, or an array:
Create a service named hexafy:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Try it Yourself »$http is an AngularJS service for reading data
from remote servers.
$http
The AngularJS $http service makes a request to the server, and
returns a response.
Example
Make a simple request to the server, and display the result in a header:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome
message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome
= response.data;
});
});
</script>
Try it Yourself »
Methods
The example above uses the .get method of the $http
service.
The .get method is a shortcut method of the $http service. There are several
shortcut methods:
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
The methods above are all shortcuts of calling the $http service:
Example
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response)
{
$scope.myWelcome =
response.statusText;
});
});
Try it Yourself »
The example above executes the $http service with an object as an argument.
The object is
specifying the HTTP method, the url, what to do on success, and what to do on
failure.
Properties
The response from the server is an object with these properties:
.config the object used to generate the request.
.data a string, or an object, carrying the response from
the server.
.headers a function to use to get header information.
.status a number defining the HTTP status.
.statusText a string defining the HTTP status.
Example
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content
= response.data;
$scope.statuscode
= response.status;
$scope.statustext
= response.statusText;
});
});
Try it Yourself »
To handle errors, add one more functions to the .then method:
Example
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("wrongfilename.htm")
.then(function(response) {
// First function handles success
$scope.content
= response.data;
}, function(response) {
// Second function handles error
$scope.content = "Something went wrong";
});
});
Try it Yourself »
JSON
The data you get from the response is expected to be in JSON format.
JSON is a great way of transporting data, and it is easy to use within
AngularJS, or any other JavaScript.
Example: On the server we have a file that returns a JSON object containing
15 customers, all wrapped in array called records.
Click here to take a look at the JSON object.×
customers.php
{{data | json}}
Example
The ng-repeat directive is perfect for looping through an
array:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li
ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('customersCtrl',
function($scope, $http) {
$http.get("customers.php").then(function(response) {
$scope.myData
= response.data.records;
});
});
</script>
Try it Yourself »
Application explained:
The application defines the customersCtrl controller, with a
$scope and
$http object.
$http is an XMLHttpRequest object for requesting
external data.
$http.get() reads JSON data from
https://www.w3schools.com/angular/customers.php.
On success, the controller creates a property, myData,
in the scope, with JSON
data from the server.
The ng-repeat directive is perfect for displaying tables.
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd"
style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{
x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{
x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
Try it Yourself »
AngularJS lets you create dropdown lists based on items in an array, or an
object.
Creating a Select Box Using ng-options
If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options directive:
Example
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.names = ["Emil", "Tobias",
"Linus"];
});
</script>
Try it Yourself »
ng-options vs ng-repeat
You can also use the ng-repeat directive to make the same dropdown list:
Example
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>Try it Yourself »
Because the ng-repeat directive repeats a block of HTML code for
each item in an array, it can be used to create options in a dropdown list, but
the ng-options directive was made especially for filling a dropdown
list with options.
What Do I Use?
You can use both the ng-repeat directive and
the ng-options directive:
Assume you have an array of objects:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Example
Using ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>Try it Yourself »
When using the value as an object, use ng-value insead of value:
Example
Using ng-repeat as an object:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>Try it Yourself »
Example
Using ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>Try it Yourself »
When the selected value is an object, it can hold more information, and your application can be more flexible.
We will use the ng-options directive in this tutorial.
The Data Source as an Object
In the previous examples the data source was an array, but we can also use an
object.
Assume you have an object with key-value pairs:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};The expression in the ng-options attribute is a bit different
for objects:
Example
Using an object as the data source, x represents the key, and
y
represents the value:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Try it Yourself »
The selected value will always be the value in a key-value
pair.
The value in a key-value
pair can also be an object:
Example
The selected value will still be the value in a key-value
pair, only this time it is an object:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Try it Yourself »
The options in the dropdown list does not have to be the key in a
key-value pair, it can also be the value, or a property of the value
object:
Example
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
Try it Yourself »
AngularJS is perfect for displaying data from a Database. Just make sure the
data is in JSON format.
The following section is a listing of the server code used to fetch SQL data.
Using PHP and MySQL. Returning JSON.
Using PHP and MS Access. Returning JSON.
Using ASP.NET, VB, and MS Access. Returning JSON.
Using ASP.NET, Razor, and SQL Lite. Returning JSON.
Cross-Site HTTP Requests
A request for data from a different server (other than the requesting page), are
called cross-site HTTP requests.
Cross-site requests are common on the web. Many pages load CSS, images,
and scripts from different servers.
In modern browsers, cross-site HTTP requests from scripts
are restricted to same site for security reasons.
The following line, in our PHP examples, has been added to allow cross-site access.
header("Access-Control-Allow-Origin: *");
<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")
outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","
outp = outp & c & "City" & c & ":" & c
& x("City") & c & ","
outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}"
next
outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>
4. Server Code ASP.NET, Razor C# and SQL Lite
@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query){
if (outp != "") {outp = outp + ","}
outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + ","
outp = outp + c + "City" + c + ":" + c + @row.City + c + ","
outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp
AngularJS has directives for binding application data to the
attributes of HTML DOM elements.
The ng-disabled Directive
The ng-disabled directive binds AngularJS application data to the
disabled attribute of HTML elements.
AngularJS Example
<div ng-app=" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
Try it Yourself »
Application explained:
The ng-disabled directive binds the application data mySwitch to the
HTML button's disabled attribute.
The ng-model
directive binds the value of the HTML checkbox element to the value of mySwitch.
If the value of mySwitch evaluates to true, the button will
be disabled:
<p>
<button disabled>Click Me!</button>
</p>
If the value of mySwitch evaluates to false, the button will
not be disabled:
<p>
<button>Click Me!</button>
</p>
The ng-show Directive
The ng-show directive shows or hides an HTML
element.
AngularJS Example
<div ng-app=">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
Try it Yourself »
The ng-show directive shows (or hides) an HTML element based on the
value of ng-show.
You can use any expression that evaluates to true or false:
AngularJS Example
<div ng-app=" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
Try it Yourself »
In the next chapter, there are more examples, using the click of a button to hide HTML elements.
The ng-hide Directive
The ng-hide directive hides or shows an HTML
element.
AngularJS Example
<div ng-app=">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>
Try it Yourself »
AngularJS has its own HTML events directives.
Events
You can add AngularJS event listeners to your HTML elements by using one or
more of these directives:
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste
The event directives allows us to run AngularJS functions at certain user
events.
An AngularJS event will not overwrite an HTML event, both events will be
executed.
Mouse Events
Mouse events occur when the cursor moves over an element, in this order:
ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave
Or when a mouse button is clicked on an element, in this order:
ng-mousedown
ng-mouseup
ng-click
You can add mouse events on any HTML element.
Example
Increase the count variable when the mouse moves over the H1 element:
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="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>
Try it Yourself »
The ng-click Directive
The ng-click
directive defines AngularJS code that will be executed when the element is being
clicked.
Example
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count
= count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Try it Yourself »
You can also refer to a function:
If you want to show a section of HTML code when a button is clicked, and hide when the button is clicked again, like a dropdown menu, make
the button behave like a toggle switch:
Menu:
Pizza Pasta Pesce
Example
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">Click
Me!</button>
<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc
= function() {
$scope.showMe = !$scope.showMe;
}
});
</script>
Try it Yourself »
The showMe variable starts out as the Boolean value false.
The myFunc function sets the showMe variable to the
opposite of what it is, by using the ! (not) operator.
$event Object
You can pass the $event object as an argument when calling the
function.
The $event object contains the browser's event object:
Example
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Mouse
Over Me!</h1>
<p>Coordinates: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.myFunc = function(myE) {
$scope.x = myE.clientX;
$scope.y
= myE.clientY;
}
});
</script>
Try it Yourself »
Forms in AngularJS provides data-binding and validation of input controls.
Input Controls
Input controls are the HTML input elements:
input elements
select elements
button elements
textarea elements
Data-Binding
Input controls provides data-binding by using the ng-model directive.
<input type="text" ng-model="firstname">
The application does now have a property named firstname.
The ng-model directive binds the input controller to the rest of
your application.
The property firstname, can be referred to in a controller:
Example
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
Try it Yourself »
It can also be referred to elsewhere in the application:
Example
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Try it Yourself »
Checkbox
A checkbox has the value true or false. Apply the
ng-model directive to a checkbox, and use its value in your
application.
Example
Show the header if the checkbox is checked:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Try it Yourself »
Radiobuttons
Bind radio buttons to your application with the ng-model
directive.
Radio buttons with the same ng-model can have different values,
but only the selected one will be used.
Example
Display some text, based on the value of the selected radio button:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Try it Yourself »
The value of myVar will be either dogs, tuts, or
cars.
Selectbox
Bind select boxes to your application with the ng-model
directive.
The property defined in the ng-model attribute will have the
value of the selected option in the selectbox.
Example
Display some text, based on the value of the selected option:
<form>
Select a topic:
<select ng-model="myVar">
<option value=">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Try it Yourself »
The value of myVar will be either dogs, tuts, or
cars.
An AngularJS Form Example
form = {{user}}
master = {{master}}
Application Code
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{{user}}</p>
<p>master = {{{master}}</p>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
Try it Yourself »
The novalidate attribute is new in HTML5. It disables any default
browser validation.
Example Explained
The ng-app directive defines the AngularJS application.
The ng-controller directive defines the application controller.
The ng-model directive binds two input elements to the
user object in the model.
The formCtrl controller sets initial values to the
master object, and defines the reset() method.
The reset() method sets the user
object
equal to the master object.
The ng-click directive invokes the reset()
method, only if the button is clicked.
The novalidate attribute is not needed for this application, but normally you
will use it in AngularJS forms, to override standard HTML5 validation.
AngularJS can validate input data.
Form Validation
AngularJS offers client-side form validation.
AngularJS monitors the state of the form and input fields (input, textarea,
select), and lets you notify the user about the current state.
AngularJS also holds information about whether they have been touched, or
modified, or not.
You can use standard HTML5 attributes to validate input, or you can make your own validation functions.
Client-side validation cannot alone secure user input. Server side
validation is also necessary.
Required
Use
the HTML5 attribute required to specify that the input field must
be filled out:
Example
The input field is required:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>Try it Yourself »
E-mail
Use the HTML5 type email to specify that the value must be an e-mail:
Example
The input field has to be an e-mail:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>Try it Yourself »
Form State and Input State
AngularJS is constantly updating the state of both the form and the input fields.
Input fields have the following states:
$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid
They are all properties of the input field, and are either true
or false.
Forms have the following states:
$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted
They are all properties of the form, and are either true
or false.
You can use these states to show meaningful messages to the user. Example, if
a field is required, and the user leaves it blank, you should give the user a
warning:
Example
Show an error message if the field has been touched AND is empty:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>Try it Yourself »
CSS Classes
AngularJS adds CSS classes to forms and input fields depending on their states.
The following classes are added to, or removed from, input fields:
ng-untouched The field has not been touched yet
ng-touched The field has been touched
ng-pristine The field has not been modified yet
ng-dirty The field has been modified
ng-valid The field content is valid
ng-invalid The field content is not valid
ng-valid-key One key for each validation.
Example: ng-valid-required, useful when there are more than one
thing that must be validated
ng-invalid-key Example: ng-invalid-required
The following classes are added to, or removed from, forms:
ng-pristine No fields has not been modified yet
ng-dirty One or more fields has been modified
ng-valid The form content is valid
ng-invalid The form content is not valid
ng-valid-key One key for each validation.
Example: ng-valid-required, useful when there are more than one
thing that must be validated
ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.
Add styles for these classes to give your application a
better and more intuitive user interface.
Example
Apply styles, using standard CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Try it Yourself »
Forms can also be styled:
Example
Apply styles for unmodified (pristine) forms, and for modified forms:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Try it Yourself »
Custom Validation
To create your own validation function is a bit more tricky; You have to add a
new directive to your application, and deal with the validation inside a
function with certain specified arguments.
Example
Create your own directive, containing a custom validation function, and refer
to it by using my-directive.
The field will only be valid if the value contains the character "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Try it Yourself »
Example Explained:
In HTML, the new directive will be referred to by using the attribute
my-directive.
In the JavaScript we start by adding a new directive named myDirective.
Remember, when naming a directive, you must use a camel case name,
myDirective, but when invoking it, you must use - separated name,
my-directive.
Then, return an object where you specify that we require ngModel,
which is the ngModelController.
Make a linking function which takes some arguments, where the fourth
argument, mCtrl, is the ngModelController,
Then specify a function, in this case named myValidation, which
takes one argument, this argument is the value of the input element.
Test if the value contains the letter "e", and set the validity of the model
controller to either true or false.
At last, mCtrl.$parsers.push(myValidation); will add the
myValidation function to an array of other functions, which will be
executed every time the input value changes.
Validation Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
Try it Yourself »
The HTML form attribute novalidate is used to disable default
browser validation.
Example Explained
The AngularJS directive ng-model binds the input elements to the model.
The model object has two properties: user and email.
Because of ng-show, the spans with color:red are displayed only
when user or email is $dirty and $invalid.
API stands for Application
Programming Interface.
Global API
The AngularJS Global API is a set of global JavaScript functions for
performing common tasks
like:
Comparing objects
Iterating objects
Converting data
The Global API functions are accessed using the angular object.
Below is a list of some common API functions:
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
Try it Yourself »
You can easily use w3.css style sheet together with AngularJS. This chapter demonstrates how.
W3.CSS
To include W3.CSS in your AngularJS application, add the following
line to the head of your document:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
If you want to study W3.CSS, visit our W3.CSS Tutorial.Below is a complete HTML example, with all AngularJS directives and
W3.CSS classes explained.
Set to false when user clicks on 'Edit' or 'Create user'.
$scope.error
Set to true if passw1 not equal passw2
$scope.incomplete
Set to true if any field is empty (length = 0)
$scope.editUser
Sets model variables
$scope.$watch
Watches model variables
$scope.test
Tests model variables for errors and incompleteness
With AngularJS, you can include HTML from an external file.
Includes
With AngularJS, you can include HTML content using the ng-include
directive:
Example
<body ng-app=">
<div ng-include="'myFile.htm'"></div>
</body> Try it Yourself »
Include AngularJS Code
The HTML files you include with the ng-include directive, can also contain
AngularJS code:
myTable.htm:
<table>
<tr ng-repeat="x in
names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
Include the file "myTable.htm" in your web page, and all AngularJS code will be
executed, even the code inside the included file:
By default, the ng-include directive does not allow you to include files from other domains.
To include files from another domain, you can add a whitelist of legal files
and/or domains in the config function of your application:
Example:
<body ng-app="myApp">
<div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div>
<script>var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider)
{
$sceDelegateProvider.resourceUrlWhitelist([
'https://tryit.w3schools.com/**'
]);
});
</script>
</body>
Try it Yourself »
Be sure that the server on the destination allows cross domain file access.
AngularJS provides animated transitions, with help from CSS.
What is an Animation?
An animation is when the transformation of an HTML element
gives you an illusion of motion.
Example:
Check the checkbox to hide the DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Try it Yourself »
Applications should not be filled with animations, but some animations can
make the application easier to understand.
What do I Need?
To make your applications ready for animations, you must include the
AngularJS Animate library:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Then you must refer to the ngAnimate module in your application:
<body ng-app="ngAnimate">
Or if your application has a name, add ngAnimate as a dependency
in your application module:
Example
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script>
Try it Yourself »
What Does ngAnimate Do?
The ngAnimate module adds and removes classes.
The ngAnimate module does not animate your HTML elements, but when ngAnimate notice
certain events, like hide or show of an HTML element, the element
gets some pre-defined classes which can be used to make animations.
The directives in AngularJS who add/remove classes are:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
The ng-show and ng-hide directives adds or removes
a ng-hide class value.
The other directives adds a ng-enter class value when they enter
the DOM, and a ng-leave attribute when they are removed from the DOM.
The ng-repeat directive also adds a ng-move class
value when the HTML element changes position.
In addition, during the animation, the HTML element will have a set
of class values, which will be removed when the animation has finished. Example: the
ng-hide directive will add these class values:
ng-animate
ng-hide-animate
ng-hide-add (if the element will be hidden)
ng-hide-remove (if the element will be showed)
ng-hide-add-active (if the element will be hidden)
ng-hide-remove-active (if the element will be showed)
Animations Using CSS
We can use CSS transitions or CSS animations to animate HTML elements. This tutorial will show you
both.
To learn more about CSS Animation, study our
CSS Transition Tutorial and our
CSS Animation Tutorial.
CSS Transitions
CSS transitions
allows you to change CSS property values smoothly, from one value to another,
over a given duration:
Example:
When the DIV element gets the .ng-hide class, the transition
will take 0.5 seconds, and the height will smoothly change from 100px to 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Try it Yourself »
CSS Animations
CSS Animations allows you to change CSS property values smoothly, from one value to another,
over a given duration:
Example:
When the DIV element gets the .ng-hide class, the myChange
animation will run, which will smoothly change the height from 100px to 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Try it Yourself »
The ngRoute module helps your application to become a Single
Page Application.
What is Routing in AngularJS?
If you want to navigate to different pages in your application, but you also
want the application to be a SPA (Single Page Application),
with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages
without reloading the entire application.
To make your applications ready for routing, you must include the AngularJS Route module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Then you must add the ngRoute as a dependency in the
application module:
var app = angular.module("myApp", ["ngRoute"]);
Now your application has access to the route module, which provides the $routeProvider.
Use the $routeProvider to configure different routes in your
application:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Where Does it Go?
Your application needs a container to put the content provided by the routing.
This container is the ng-view directive.
There are three different ways to include the ng-view directive
in your application:
<div
class="ng-view"></div> Try it Yourself »
Applications can only have one ng-view directive, and this will be the placeholder for all views
provided by the route.
$routeProvider
With the $routeProvider you can define what page to display when a user
clicks a link.
Example:
Define a $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
Try it Yourself »
Define the $routeProvider using the config method of your application. Work
registered in the config method will be performed when the
application is
loading.
Controllers
With the $routeProvider you can also define a controller for
each "view".
Example:
Add controllers:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
Try it Yourself »
The "london.htm" and "paris.htm" are normal HTML files, which you can add AngularJS expressions as you would with any other HTML sections of your
AngularJS application.
The files looks like this:
london.htm
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Template
In the previous examples we have used the templateUrl property in the
$routeProvider.when method.
You can also use the template property, which allows you to write HTML
directly in the property value, and not refer to a page.
Example:
Write templates:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
Try it Yourself »
The otherwise method
In the previous examples we have used the when method of the $routeProvider.
You can also use the otherwise method, which is the default route
when none of the others get a match.
Example:
If neither the "Banana" nor the "Tomato" link has been clicked, let them
know:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});
Try it Yourself »
It is time to create a real AngularJS Application.
Make a Shopping List
Lets use some of the AngularJS features to make a shopping list, where you can
add or remove items:
My Shopping List
{{x}}×
{{errortext}}
Application Explained
Step 1. Getting Started:
Start by making an application called myShoppingList, and add a
controller named myCtrl to it.
The controller adds an array named products to the current
$scope.
In the HTML, we use the ng-repeat directive to display a list
using the items in the array.
Example
So far we have made an HTML list based on the items of an array:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
Try it Yourself »
Step 2. Adding Items:
In the HTML, add a text field, and bind it to the application with the ng-model
directive.
In the controller, make a function named addItem, and use the
value of the addMe input field to add an item to the products array.
Add a button, and give it an ng-click directive that will run
the addItem function when the button is clicked.
Example
Now we can add items to our shopping list:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
Try it Yourself »
Step 3. Removing Items:
We also want to be able to remove items from the shopping list.
In the controller, make a function named removeItem, which takes
the index of the item you want to remove, as a parameter.
In the HTML, make a <span> element for each item, and give them
an ng-click directive which calls the removeItem
function with the current $index.
Example
Now we can remove items from our shopping list:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<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>
Try it Yourself »
Step 4. Error Handling:
The application has some errors, like if you try to add the same item twice,
the application crashes. Also, it should not be allowed to add empty items.
We will fix that by checking the value before adding new
items.
In the HTML, we will add a container for error messages, and write an error
message when someone tries to add an existing item.
Example
A shopping list, with the possibility to write error messages:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = ";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe)
== -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already
in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = ";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<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>
<p>{{errortext}}</p>
</div>
Try it Yourself »
Step 5. Design:
The application works, but could use a better design. We use the W3.CSS stylesheet to style our application.
Add the W3.CSS stylesheet, and include the proper classes throughout the
application, and the result will be the same as the shopping list at the top of
this page.
Example
Style your application using the W3.CSS stylesheet:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try it Yourself »
Try it Yourself
You can edit the examples online, and click on a button to
view the result.
AngularJS Example
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>
</div>
Try it Yourself »