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

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.

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

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

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>

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>

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.

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>

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

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.

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:

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

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

<!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>
 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.
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.
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.

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

<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

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

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

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

Uploaded by

Copyright:

Available Formats

Download Angular JS Library

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

 AngularJS is distributed as a JavaScript file, and can be added

23 R.Vijayani / Asso Prof / SITE / VIT

24 R.Vijayani / Asso Prof / SITE / VIT

28 R.Vijayani / Asso Prof / SITE / VIT

29 R.Vijayani / Asso Prof / SITE / VIT

30 R.Vijayani / Asso Prof / SITE / VIT

31 R.Vijayani / Asso Prof / SITE / VIT

32 R.Vijayani / Asso Prof / SITE / VIT

33 R.Vijayani / Asso Prof / SITE / VIT

35 R.Vijayani / Asso Prof / SITE / VIT

36 R.Vijayani / Asso Prof / SITE / VIT

Step2 : Adding a Controller

37 R.Vijayani / Asso Prof / SITE / VIT

38 R.Vijayani / Asso Prof / SITE / VIT

39 R.Vijayani / Asso Prof / SITE / VIT

43 R.Vijayani / Asso Prof / SITE / VIT

44 R.Vijayani / Asso Prof / SITE / VIT

• We assign values to the

You might also like