AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

(1)

(2)

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

.

<

script

src

="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

(3)

Before you study AngularJS, you should have a basic understanding of:

•

HTML

•

CSS

(4)

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.

(5)

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

(6)

<!DOCTYPE html>

<html>

<script

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang

ular.min.js"></script>

<body>

<p>Input something in the input box:</p>

<p>Name: <input type="text"

ng-model="name"

></p>

<p

ng-bind="name"

></p>

</div>

</body>

</html>

(7)

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

.

(8)

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

>

(9)

AngularJS expressions are written inside double braces:

.

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

>Name:

<

input

type

="text"

ng-model

="name"><

/p

>

<

p

>

<

/p

>

<

/div

>

<

/body

>

<

/html

>

(10)

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:

<

/div

>

<

script

>

var

app = angular.module(

'

myApp

'

, []);

app.controller(

'

myCtrl

'

,

function

($scope) {

$scope.firstName=

"John"

;

$scope.lastName=

"Doe"

;

});

(11)

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:

(12)

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:

(13)

Theng-repeat directive repeats an HTML element:

<

div

ng-app

=""

ng-init

="names=['Jani','Hege','Kai']">

<

ul

>

<

li

ng-repeat

="x in names">

<

/li

>

<

/ul

>

<

/div

>

<

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

<

/li

>

<

/ul

>

<

/div

>

(14)

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

>

(15)

Filters are added to directives, like

ng-repeat

, by

using the pipe character

|

, followed by a filter:

<

div

ng-app

="myApp"

ng-controller

="namesCtrl">

<

ul

>

<

li

ng-repeat

="x in names | orderBy:'country'">

<

/li

>

<

/ul

>

<

/div

>

(16)

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:

<ul>

angular.module('myApp', []).controller('namesCtrl',

function($scope) {

$scope.names = [

'Jani',

'Carl',

'Margareth',

'Hege',

'Joe',

'Gustav',

'Birgit',

'Mary',

'Kai'

];

});

</script>

(17)

(18)

Click the table headers to change the sort order::

<

div

ng-app

="myApp"

ng-controller

="namesCtrl">

<

table

border

="1"

width

="100%">

<

tr

>

<

th

ng-click

="orderByMe('name')">

Name

<

/th

>

<

th

ng-click

="orderByMe('country')">

Country

<

/th

>

<

/tr

>

<

tr

ng-repeat

="x in names | orderBy:myOrderBy">

<

td

>

<

/td

>

<

td

>

<

/td

>

<

/tr

>

<

/table

>

<

/div

>

[]).controller('namesCtrl', function($s cope) {

$scope.names = [

{name:'Jani',country:'Norway'}, {name:'Carl',country:'Sweden'}, {name:'Margareth',country:'England' },

{name:'Hege',country:'Norway'}, {name:'Joe',country:'Denmark'}, {name:'Gustav',country:'Sweden'}, {name:'Birgit',country:'Denmark'}, {name:'Mary',country:'England'}, {name:'Kai',country:'Norway'} ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); </script>

(19)

(20)

Step 1. Getting Started:

Start by making an application called myShoppingList, and add a controller namedmyCtrl 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.

<

script

>

var

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

<

/li

>

<

/ul

>

<

/div

>

(21)

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

<

script

>

var

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

<

/li

>

<

/ul

>

<

input

ng-model="addMe">

<

button

ng-click="addItem()">

Add

<

/button

>

(22)

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.

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>

{{x}}<span ng-click="removeItem($index)">×</span>

</li> </ul>

(23)

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.

<ul>

{{x}}<span

ng-click="removeItem($index)">×</span> </li>

</ul>

<p>{{errortext}}</p>

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

(24)

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.

<h3>My Shopping List</h3> </header>

<ulclass="w3-ul">

</ul>

</div>

<p class="w3-text-red">{{errortext}}</p> </div>

(25)

<!DOCTYPE html> <html>

<script

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

(26)

<header class="w3-container w3-light-grey w3-padding-16"> <h3>My Shopping List</h3>

</header>

<li repeat="x in products" class="w3-paddi16">{{x}}<span

ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>

</ul>

</div>

<button ng-click="addItem()" class="btn padding w3-green">Add</button> </div> </div> <p class="w3-text-red">{{errortext}}</p> </div> </div> </body> </html>

(27)