Scribd
Upload
25 views12 pages

Unit 5 Angular

Uploaded by

Swapnil Roy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
25 views12 pages

Unit 5 Angular

Uploaded by

Swapnil Roy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 12

Unit-5: Angular JS: Single page application

5.1 Single page application using AngularJS


5.1.1 Create a module, Define Simple controller
5.1.2 Embedding AngularJS script in HTML
5.1.3 AngularJS’s routine capability
5.1.3.1 $routeProvider service from ngRoute
5.1.3.2 Navigating different pages
5.2 HTML DOM directives
5.2.1 ng-disabled, ng-show, ng-hide, ng-click
5.2.2 Modules (Application, Controller)
5.2.3 Forms (Events, Data validation, ng-click)
https://www.tutorialspoint.com/angularjs/angularjs_overview.htm

AngularJS - First Application


Before creating actual Hello World ! application using AngularJS, let us see the parts
of a AngularJS application. An AngularJS application consists of following three
important parts −
• ng-app − This directive defines and links an AngularJS application to
HTML.
• ng-model − This directive binds the values of AngularJS application
data to HTML input controls.
• ng-bind − This directive binds the AngularJS Application data to HTML
tags.

Creating AngularJS Application


Step 1: Load framework
Being a pure JavaScript framework, it can be added using <Script> tag.
<script
src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
Step 2: Define AngularJS application using ng-app directive
<div ng-app = "">
...
</div>
Step 3: Define a model name using ng-model directive
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
Step 4: Bind the value of above model defined using ng-bind
directive
<p>Hello <span ng-bind = "name"></span>!</p>
Executing AngularJS Application
Use the above-mentioned three steps in an HTML page.

testAngularJS.htm
<html>
<head>
<title>AngularJS First Application</title>
</head>

<body>
<h1>Sample Application</h1>

<div ng-app = "">


<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">


</script>

</body>
</html>

Output
Open the file testAngularJS.htm in a web browser. Enter your name and see the
result.

How AngularJS Integrates with HTML


• The ng-app directive indicates the start of AngularJS application.
• The ng-model directive creates a model variable named name, which
can be used with the HTML page and within the div having ng-app
directive.
• The ng-bind then uses the name model to be displayed in the HTML
<span> tag whenever user enters input in the text box.
• Closing</div> tag indicates the end of AngularJS application.
AngularJS - HTML DOM
The following directives are used to bind application data to the attributes of HTML
DOM elements −

Sr.No. Name & Description

1
ng-disabled
disables a given control.

2
ng-show
shows a given control.

3
ng-hide
hides a given control.

4
ng-click
represents a AngularJS click event.

ng-disabled Directive
Add ng-disabled attribute to an HTML button and pass it a model. Bind the model to
a checkbox and see the variation.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>
ng-show Directive
Add ng-show attribute to an HTML button and pass it a model. Bind the model to a
checkbox and see the variation.
<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>
ng-hide Directive
Add ng-hide attribute to an HTML button and pass it a model. Bind the model to a
checkbox and see the variation.
<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>
ng-click Directive
Add ng-click attribute to an HTML button and update a model. Bind the model to
HTML and see the variation.
<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
Example
The following example shows use of all the above mentioned directives.

testAngularJS.htm
Live Demo

<html>
<head>
<title>AngularJS HTML DOM</title>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app = "">


<table border = "0">
<tr>
<td><input type = "checkbox" ng-model = "enableDisableButton">Disable
Button</td>
<td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
<td><button ng-show = "showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
<td><button ng-hide = "showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{ clickCounter }}</p></td>
<td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">


</script>

</body>
</html>
Output
Open the file testAngularJS.htm in a web browser and see the result.

AngularJS – Modules
AngularJS supports modular approach. Modules are used to separate logic such as
services, controllers, application etc. from the code and maintain the code clean. We
define modules in separate js files and name them as per the module.js file. In the
following example, we are going to create two modules −
• Application Module − used to initialize an application with controller(s).
• Controller Module − used to define the controller.

Application Module
Here is a file named mainApp.js that contains the following code −
var mainApp = angular.module("mainApp", []);
Here, we declare an application mainApp module using angular.module function and
pass an empty array to it. This array generally contains dependent modules.

Controller Module
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Manya",
lastName: "Shukla",
fees:500,

subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

Here, we declare a controller studentController module using mainApp.controller


function.

Use Modules
<div ng-app = "mainApp" ng-controller = "studentController">
...
<script src = "mainApp.js"></script>
<script src = "studentController.js"></script>

</div>
Here, we use application module using ng-app directive, and controller using
ngcontroller directive. We import the mainApp.js and studentController.js in the main
HTML page.

Example
The following example shows use of all the above mentioned modules.

testAngularJS.htm
<html>
<head>
<title>Angular JS Modules</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "/angularjs/src/module/mainApp.js"></script>
<script src = "/angularjs/src/module/studentController.js"></script>

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>

<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">

<table border = "0">


<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>

<td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

</body>
</html>
mainApp.js
var mainApp = angular.module("mainApp", []);
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,

subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

Output
Open the file textAngularJS.htm in a web browser. See the result.

AngularJS - Forms
AngularJS enriches form filling and validation. We can use ng-click event to handle
the click button and use $dirty and $invalid flags to do the validation in a seamless
way. Use novalidate with a form declaration to disable any browser-specific
validation. The form controls make heavy use of AngularJS events. Let us have a look
at the events first.

Events
AngularJS provides multiple events associated with the HTML controls. For example,
ng-click directive is generally associated with a button. AngularJS supports the
following events −

• 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

ng-click
Reset data of a form using on-click directive of a button.

<input name = "firstname" type = "text" ng-model = "firstName" required>


<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>

<script>
function studentController($scope) {
$scope.reset = function() {
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "MaheshParashar@tutorialspoint.com";
}

$scope.reset();
}
</script>
Validate Data
The following can be used to track error.
• $dirty − states that value has been changed.
• $invalid − states that value entered is invalid.
• $error − states the exact error.

Example
The following example will showcase all the above-mentioned directives.

testAngularJS.htm
Live Demo

<html>
<head>
<title>Angular JS Forms</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>
<body>

<h2>AngularJS Sample Application</h2>


<div ng-app = "mainApp" ng-controller = "studentController">

<form name = "studentForm" novalidate>


<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input name = "firstname" type = "text" ng-model = "firstName" required>
<span style = "color:red" ng-show = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid">
<span ng-show = "studentForm.firstname.$error.required">First Name is
required.</span>
</span>
</td>
</tr>

<tr>
<td>Enter last name: </td>
<td><input name = "lastname" type = "text" ng-model = "lastName" required>
<span style = "color:red" ng-show = "studentForm.lastname.$dirty &&
studentForm.lastname.$invalid">
<span ng-show = "studentForm.lastname.$error.required">Last Name is
required.</span>
</span>
</td>
</tr>

<tr>
<td>Email: </td><td><input name = "email" type = "email" ng-model = "email"
length = "100" required>
<span style = "color:red" ng-show = "studentForm.email.$dirty &&
studentForm.email.$invalid">
<span ng-show = "studentForm.email.$error.required">Email is
required.</span>
<span ng-show = "studentForm.email.$error.email">Invalid email
address.</span>
</span>
</td>
</tr>

<tr>
<td>
<button ng-click = "reset()">Reset</button>
</td>
<td>
<button ng-disabled = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
studentForm.lastname.$invalid || studentForm.email.$dirty &&
studentForm.email.$invalid" ng-click="submit()">Submit</button>
</td>
</tr>

</table>
</form>
</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.reset = function() {
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "MaheshParashar@tutorialspoint.com";
}

$scope.reset();
});
</script>

</body>
</html>

Output
Open the file testAngularJS.htm in a web browser and see the result.

You might also like