Scribd
Upload
64 views

AngularJS Tutorial

This document provides an introduction to AngularJS including: - AngularJS extends HTML with new attributes and is well-suited for single page applications. - The tutorial covers directives, expressions, filters, modules, controllers and other AngularJS concepts. - AngularJS code examples are provided to demonstrate bindings, controllers and modules.

Uploaded by

Pankaj Haldikar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
64 views

AngularJS Tutorial

This document provides an introduction to AngularJS including: - AngularJS extends HTML with new attributes and is well-suited for single page applications. - The tutorial covers directives, expressions, filters, modules, controllers and other AngularJS concepts. - AngularJS code examples are provided to demonstrate bindings, controllers and modules.

Uploaded by

Pankaj Haldikar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 43

AngularJS Tutorial

AngularJS extends HTML with new attributes.

AngularJS is perfect for Single Page Applications (SPAs).

AngularJS is easy to learn.

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.

AngularJS Example
<!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>
</div>
</body>
</html>
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 Introduction

AngularJS is a JavaScript framework. It can be added to an HTML page


with a <script> tag.

AngularJS extends HTML attributes with Directives, and binds data to


HTML with Expressions.

AngularJS is a JavaScript Framework


AngularJS is a JavaScript framework written in JavaScript.

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>

AngularJS Extends HTML


AngularJS extends HTML with ng-directives.

The ng-app directive defines an AngularJS application.

The ng-model directive binds the value of HTML controls (input, select,


textarea) to application data.

The ng-bind directive binds application data to the HTML view.


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>

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.

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

The ng-init directive initializes AngularJS application variables

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

Alternatively with valid HTML:

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

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
You can use data-ng-, instead of ng-, if you want to make your page HTML
valid.

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

AngularJS will "output" data exactly where the expression is written:

<!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>
AngularJS expressions bind AngularJS data to HTML the same way as
the ng-bind directive.

<!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>
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.

<div ng-app="myApp" ng-controller="myCtrl">

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

AngularJS 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";
});

AngularJS Expressions
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 }}

<!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>

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


without solving it:

<!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>

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="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol">

</div>
AngularJS Numbers
AngularJS numbers are like JavaScript numbers:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>
Same example using ng-bind:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>
AngularJS Strings
AngularJS strings are like JavaScript strings:

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

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Same example using ng-bind:


AngularJS Objects
AngularJS objects are like JavaScript objects:

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

<p>The name is {{ person.lastName }}</p>

</div>
Same example using ng-bind:

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

<p>The name is <span ng-bind="person.lastName"></span></p>

</div
AngularJS Arrays
AngularJS arrays are like JavaScript arrays:

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

<p>The third result is {{ points[2] }}</p>

</div>

Same example using ng-bind:

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

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>
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.

AngularJS Modules
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

<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:

<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>

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:
<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>

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:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

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 <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.
<!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>
AngularJS Directives
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.

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

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:

<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>

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:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

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:

<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>

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:
<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>

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>
Attribute

<div w3-test-directive></div>

Class

<div class="w3-test-directive"></div>

Comment

<!-- directive: w3-test-directive -->

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

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>"
  };
});

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.

AngularJS ng-model 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.

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

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:

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
  <h1>You entered: {{name}}</h1>
</div>

Validate User Input


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

<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>
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):

<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
  Email:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Status</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>
CSS Classes
The ng-model directive provides CSS classes for HTML elements, depending
on their status:

<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>
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
AngularJS Data Binding
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.

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:

<p ng-bind="firstname"></p>
You can also use double braces {{ }} to display content from the model:

<p>First name: {{firstname}}</p>
The ng-model Directive
Use the ng-model directive to bind data from the model to the view on HTML
controls (input, select, textarea)

<input ng-model="firstname">

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.
<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.lastname = "Doe";
});
</script>

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.

<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>

You might also like