Scribd
Upload
33 views30 pages

Awd Unit 5

Uploaded by

namil56910
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views30 pages

Awd Unit 5

Uploaded by

namil56910
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

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

You might also like