Scribd
Upload
89 views23 pages

FALLSEM2020-21 ITE1002 ETH VL2020210105029 Reference Material I 03-Sep-2020 Angular JS directives-Datatypes-Module-Controller-Scope Object PDF

The document provides instructions for downloading and using AngularJS in a web page. It can be downloaded from the AngularJS website and included in an HTML file using a script tag. The core components of AngularJS are directives like ng-app, ng-model, and ng-bind that allow data binding between the application and HTML. AngularJS extends HTML with these directives to create single-page applications.

Uploaded by

Manish Rao
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
89 views23 pages

FALLSEM2020-21 ITE1002 ETH VL2020210105029 Reference Material I 03-Sep-2020 Angular JS directives-Datatypes-Module-Controller-Scope Object PDF

The document provides instructions for downloading and using AngularJS in a web page. It can be downloaded from the AngularJS website and included in an HTML file using a script tag. The core components of AngularJS are directives like ng-app, ng-model, and ng-bind that allow data binding between the application and HTML. AngularJS extends HTML with these directives to create single-page applications.

Uploaded by

Manish Rao
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/ 23

Download Angular JS Library

 Download it from https://angularjs.org/

 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/a
ngularjs/1.8.0/angular.min.js"></script>

23 R.Vijayani / Asso Prof / SITE / VIT


The AngularJS Components
 AngularJS extends HTML with ng-directives.
 The AngularJS framework can be divided into following three major
parts −
 ng-app − This directive defines and links an AngularJS application to
HTML. Or AngularJS that the an HTML container element is the
"owner" of an AngularJS application.
 ng-model − This directive binds the values of AngularJS application data
to HTML input controls. Or binds the value of the input field to the
application variable.
 ng-bind − This directive binds the AngularJS Application data to HTML
tags. Or binds the content of the HTML element to the application
variable.

24 R.Vijayani / Asso Prof / SITE / VIT


<html><head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"
></script> </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>
</body> </html>
 ng-app directive indicates the start of AngularJS application.
 ng-model directive then creates a model variable named "name" which
can be used with the html page and within the div having ng-app
directive.
 ng-bind then uses the name model to be displayed in the html span tag
whenever user input something in the text box.
25 R.Vijayani / Asso Prof / SITE / VIT
26 R.Vijayani / Asso Prof / SITE / VIT
AngularJS Expressions can be written inside double
braces: {{ expression }} or ng-bind="expression"

<html ng-app><head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/ang
ular.min.js"></script>
</head><body><div><label>Name:</label>
<input type = "text" ng-model = "NameText" placeholder =
"Enter a name here">
<hr /><h1>Hello {{NameText}}!</h1>
</div></body></html>
27 R.Vijayani / Asso Prof / SITE / VIT
AngularJS Directives
 AngularJS directives are HTML attributes with an ng prefix.
 The ng-init directive initializes AngularJS application variables.
<!DOCTYPE html> <html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.m
in.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div></body></html>

28 R.Vijayani / Asso Prof / SITE / VIT


<!DOCTYPE html> <html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min
.js"></script><body>
<p>Change the value of the input field:</p>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in
the input field.</p></body></html>

29 R.Vijayani / Asso Prof / SITE / VIT


AngularJS Numbers
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
<p>Total in dollar: <span ng-bind="quantity * cost">
</span></p></div>

AngularJS Arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p></div>

30 R.Vijayani / Asso Prof / SITE / VIT


Angular JS Strings
<div ng-app=""
ng-init="firstName='John';lastName='Doe'">
<p>The full name is {{ firstName + " " + lastName }}</p>
</div>

Angular JS Objects
<div ng-app=""
ng-init="person={firstName:‘R',lastName:‘Vijayan'}">
<p>The name is {{ person.lastName }}</p></div>

31 R.Vijayani / Asso Prof / SITE / VIT


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.

32 R.Vijayani / Asso Prof / SITE / VIT


ng-repeat
 The ng-repeat directive repeats an HTML element.
 The ng-repeat directive actually clones HTML elements once
for each item in a collection.
<!DOCTYPE html> <html> <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angul
ar.min.js"></script><body>
<div ng-app="" ng-init="names=['Janani','Hema','Kumar']">
<p>Looping with ng-repeat:</p> <ul>
<li ng-repeat="x in names">
{{ x }}
</li> </ul></div></body>

33 R.Vijayani / Asso Prof / SITE / VIT


<!DOCTYPE html> <html> Array of Objects
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/an
gular.min.js"></script><body>
<div ng-app="" ng-init="names=[
{name:‘Jani',country:'India'},
{name:'Hema',country:'America'},
{name:'Kumar',country:'Denmark'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul></div></body></html> R.Vijayani / Asso Prof / SITE / VIT
34
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.

35 R.Vijayani / Asso Prof / SITE / VIT


AngularJS Controllers
 AngularJS controllers control the data of AngularJS
applications.
 AngularJS controllers are regular JavaScript Objects.
 AngularJS applications are controlled by controllers.
 The ng-controller directive defines the application
controller.
 A controller is a JavaScript Object, created by a standard
JavaScript object constructor.

36 R.Vijayani / Asso Prof / SITE / VIT


Step1 : Creating a 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.

Step2 : Adding a Controller


 Add a controller to your application, and refer to the
controller with the ng-controller directive:

37 R.Vijayani / Asso Prof / SITE / VIT


<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/ang
ular.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>
{{ firstName + " " + lastName }}
</div><script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = “Vijayan";
$scope.lastName = “R";
});</script></body></html>

38 R.Vijayani / Asso Prof / SITE / VIT


Application explained:
 The AngularJS application is defined by ng-app="myApp".
The application runs inside the <div>.
 The ng-controller="myCtrl" attribute is an AngularJS
directive. It defines a controller.
 The myCtrl function is a JavaScript function.
 AngularJS will invoke the controller with a $scope object.
 In AngularJS, $scope is the Application object (the owner of
application variables and functions).
 The controller creates two properties (variables) in the scope
(firstName and lastName).
 The ng-model directives bind the input fields to the controller
properties (firstName and lastName).

39 R.Vijayani / Asso Prof / SITE / VIT


<!doctype html><html><head>
<script src = Include AngularJS
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js
"></script></head>
Point to AngularJS app
<body ng-app = "myapp">
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Web
Technology!</h2>
View
</div><script>
angular.module("myapp", []).controller("HelloController",
function($scope) {
$scope.helloTo = {}; Controller

$scope.helloTo.title = "AngularJS";
});</script></body></html>
40 R.Vijayani / Asso Prof / SITE / VIT
 Include AngularJS
included the AngularJS JavaScript file in the HTML page so we can use
AngularJS
 Point to AngularJS app
tell what part of the HTML contains the AngularJS app either add it
to html element or body element
 View
ng-controller tells AngularJS what controller to use with this
view. helloTo.title tells AngularJS to write the "model" value named
helloTo.title to the HTML at this location.
 Controller
code registers a controller function named HelloController in the angular
module named myapp.
The $scope parameter passed to the controller function is the model. The
controller function adds a helloTo JavaScript object, and in that object it
adds a title field.
41 R.Vijayani / Asso Prof / SITE / VIT
When the page is loaded in the browser,
following things happen:
 HTML document is loaded into the browser, and evaluated by the
browser.
 AngularJS JavaScript file is loaded, the angular global object is created.
 Next, JavaScript which registers controller functions is executed.
 Next AngularJS scans through the HTML to look for AngularJS apps
and views.
 Once view is located, it connects that view to the corresponding
controller function.
 Next, AngularJS executes the controller functions.
 It then renders the views with data from the model populated by the
controller.The page is now ready.
42 R.Vijayani / Asso Prof / SITE / VIT
AngularJS $Scope
 It is the binding part between the HTML (view) and the JavaScript
(controller).
 It is an object with the available properties and methods.
 It is available for both the view and the controller.
 If we consider an AngularJS application to consist of:
 View, which is the HTML.
 Model, which is the data available for the current view.
 Controller, which is the JavaScript function that
makes/changes/removes/controls the data.
 Then the scope is the Model.
 The scope is a JavaScript object with properties and methods,
which are available for both the view and the controller.

43 R.Vijayani / Asso Prof / SITE / VIT


 The controller's primary responsibility is to control the data which
gets passed to the view. The scope and the view have two-way
communication.
 The properties of the view can call "functions" on the scope.
Moreover events on the view can call "methods" on the scope.

44 R.Vijayani / Asso Prof / SITE / VIT


<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p> </div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>

• We assign values to the


var mainApp = angular.module("mainApp", []);
models in
shapeController.
mainApp.controller("shapeController", function($scope) { • We override message in
$scope.message = "In shape controller"; child controller
$scope.type = "Shape"; named circleController.
}); • When message is used
mainApp.controller("circleController", function($scope) { within the module of
$scope.message = "In circle controller"; controller
}); named circleController,
mainApp.controller("squareController", function($scope) { the overridden message
$scope.message = "In square controller"; is used.
$scope.type = "Square";
}); /p> </div>

45
R.Vijayani / Asso Prof / SITE / VIT

You might also like