UNIT 5 : ANGULAR JS : SINGLE PAGE
APPLICATIONS
5.1 Single Page Application using AngularJS
5.1.1 Create a module, Define Simple Controller
5.1.2 Embedding ANGULAR JS 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 Validations, ng-click)
5.1 Single Page Application
using AngularJS
5.1.1 Create a module, Define Simple
Controller
5.1.2 Embedding ANGULAR JS 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.1.1 Create a module, Define
Simple Controller
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.
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Define Simple Controller
AngularJS controllers control the data
of AngularJS applications.
AngularJS controllers are regular
JavaScript Objects.
Example:
<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">
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 = “TYBCA";
$scope.lastName = “The Great Class";
});
</script>
</body>
</html>
5.1.2 Embedding ANGULAR JS
script in HTML
ng-bind is used to bind data to the
HTML
<element ng-bind-html=“expression”>
…..
</element>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>20BCA</h1>";
});
</script>
</body>
</html>
5.1.3 ANGULARJS’s Routine
Capability
5.1.3.1 $routeProvider Service from
ngRoute
5.1.3.2 Navigating different pages
5.1.3.1 $routeProvider Service
from ngRoute
The ngRoute module helps your
application to become a Single Page
Application.
Use the $routeProvider to configure
different routes in your application.
To use $routeProvider use the following
CDN:
<script
src="https://ajax.googleapis.com/ajax/li
bs/angularjs/1.6.9/angular-
route.js"></script>
5.1.3.2 Navigating different pages
<html> <script>
var app = angular.module("myApp",
<script
["ngRoute"]);
src="https://ajax.googleapis.com/ajax
app.config(function($routeProvider) {
/libs/angularjs/1.6.9/angular.min.js">
$routeProvider
</script>
.when("/", {
<script templateUrl : "home.htm"
src="https://ajax.googleapis.com/ajax })
/libs/angularjs/1.6.9/angular-
.when("/aboutus", {
route.js"></script>
templateUrl : "aboutus.htm"
})
<body ng-app="myApp"> .when("/gallery", {
<a href="#/!">Home</a></p> templateUrl : "gallery.htm"
<a href="#!aboutus">About Us</a> })
.when("/contactus", {
<a href="#!gallery">Gallery</a>
templateUrl : "contactus.htm"
<a href="#!contactus">Contact Us</a>
});
<div ng-view></div> });
</body> </script>
</html> </body>
</html>
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 Validations,
ng-click)
5.2.1 ng-disabled, ng-show,
ng-hide, ng-click
ng-disabled
The ng-disabled directive binds
AngularJS application data to the
disabled attribute of HTML elements.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<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>
</body>
</html>
ng-show
The ng-show directive shows or hides
an HTML element.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="">
<p ng-show="true">I am visible.</p>
</div>
</body>
</html>
ng-hide
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p ng-show="false">I am not visible.</p>
</div>
</body>
</html>
ng-click
The ng-click directive defines
AngularJS code that will be executed
when the element is being clicked.
<!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">
<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>
</body>
</html>
5.2.2 Modules (Application,
Controller)
5.2.3 Forms (Events, Data
Validations, ng-click)
Events
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.
ng-blur ng-keypress
ng-keyup
ng-change
ng-mousedown
ng-click ng-mouseenter
ng-copy ng-mouseleave
ng-cut ng-mousemove
ng-dblclick ng-mouseover
ng-mouseup
ng-focus
ng-paste
ng-keydown
Example:
<!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">
<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>
</body>
</html>
Data Validations
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.
Required
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
E-Mail
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<p>Try writing an E-mail address in the input field:</p>
<form name="myForm">
<input type="email" name="myInput" ng-model="myInput">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
ng-click
