Web Technologies

(20MCA23)

Faculty :
Prof.Sunita S Goravanakolla
Module 5: Angular Js(Angular Javascript)
• Introduction to Angular JS,
• Directives
• Expressions
• Controllers,
• Filters,
• Services,
• Events,
• Forms,
• Validations,
• Examples.
Module 5: Angular Js(Angular Javascript) References
• https://www.w3schools.com/angular/angular_intro.asp
• https://www.tutorialspoint.com/angularjs/index.htm#
• https://www.w3schools.com/angular/angular_ref_directives.asp
• https://www.youtube.com/watch?v=jynZZKGhFP0
• https://www.tutorialspoint.com/angularjs_online_training/index.asp
Module 5: Angular Js(Angular Javascript)
• AngularJS is a popular, open source, powerful and MVC
architecture based, frontend, JavaScript framework.
• Angular JS framework can be added to an HTML page with a
<script> tag.
• Angular JS is written in Javascript.

Note: MVC architecture mean Model-View-Controller based

framework like ROR(Ruby on Rails) Framework.
Module 5: Angular Js(Angular Javascript) MVC Architecture
Angular.js follows the MVC architecture, the diagram of the MVC framework as
shown below
Module 5: Angular Js(Angular JavaScript)
AngularJS is a JavaScript framework written in Javascript
language.
It can be added to an HTML page with a <script> tag.

• AngularJS is open source MVC(Model-View-Controller) Frame

work.
• It is used in Single Page Application (SPA) projects.
• It extends HTML with additional attributes and makes it more
responsive to user actions.
• AngularJS is open source, completely free, and used by
thousands of developers around the world.
Module 5: Angular Js(Angular Javascript)
AngularJS is distributed/provided as a JavaScript file, and can be added
to a web page with a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.
9/angular.min.js"></script>

AngularJS extends HTML with ng-directives.

• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the HTML controls (input, select,
text area) to application data.
• The ng-bind directive binds application data to the HTML
view.(HTML Elements, for example <p> tag etc )
Module 5: Why to Learn AngularJS?
• AngularJS is an open-source web application framework. It was
originally developed in 2009 by Misko Hevery and Adam Abrons. It is
now maintained by Google. Its latest version is 1.2.21.
• AngularJS is a efficient framework that can create Rich Internet
Applications (RIA).
• AngularJS helps developers to write client side applications using
JavaScript using Model View Controller (MVC) method.
• Applications written in AngularJS are cross-browser compliant.
• AngularJS automatically handles JavaScript code suitable for each
browser.
• AngularJS is open source, completely free, and used by thousands of
developers around the world.
Module 5: Angular Js(Angular JavaScript)
SPA is:
Single-page applications (SPAs) are web applications that load a single
HTML page and dynamically update that page as the user interacts with
the application.
SPAs use Ajax and HTML5 to create a flexible and responsive Web
applications, without constant page reloads.
However, this means much of the work happens on the client side, in
JavaScript.
Hence when AngularJS loads in the browser, it loads only the
single index.html file, as a user interact other components are loaded
without refreshing a page.
Module 5: Angular Js(Angular Javascript) Environment setup
Module 5: Angular Js(Angular Javascript) Environment setup
https://angularjs.org/

Note the Path for minified version of Angular JS Note the Path for uncompressed readable version
Framework (Angular JS minified file) of Angular JS Framework (Angular JS file)
Angular JS Environment setup & Linking Angular JS framework with HTML file
Module 5: Developing Angular JS Applications

https://www.youtube.com/watch?v=jynZZKGhFP0

PUT
Module 5: Developing Angular JS Applications
https://www.youtube.com/watch?v=jynZZKGhFP0

OUTPUT
Hello World Example using AngularJS.
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro

output
One more Example on Angular JS

https://www.tutorialspoint.com/try_angularjs_on
line.php
Module 5: Angular Js(Angular JavaScript)
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.
Module 5: Angular Js(Angular JavaScript)
Steps in Creating AngularJS Application

The component
‘Model’ is
responsible for
managing the data
of the application. It
responds to the
request from the
view and it also
responds to
instructions from
the controller to
update itself.
 AngularJS Directives
AngularJS directives are HTML attributes with an ng prefix.The
prefix “ng” means "Angular;" All of the built-in directives of
Angular JS use “ng” prefix.
Example: The ng-init directive initializes AngularJS application variables
Angular JS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS will "output" data exactly where the expression is written:
Example for Angular JS is : {{ 5 + 5 }}
Example Code is as Follows:

OUTPUT
Angular JS Expressions
If you remove the ng-app directive, HTML will display the expression as
it is, without solving it:
Angular JS Expressions:ONE MORE EXAMPLE

OUTPUT
Angular JS Expressions Example expression with background colour
OUTPUT
Angular JS Directives:
• AngularJS lets you extend HTML with new attributes called Directives.
• AngularJS has a set of built-in directives which offers functionality to your applications.
• AngularJS also lets you define your own directives.

https://www.w3schools.com/angular/angular_directives.asp

AngularJS directives are extended HTML attributes with the prefix ng-.
Examples:
• The ng-app directive initializes an AngularJS application.

• The ng-init directive initializes application data.

• The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
Read about all AngularJS directives in AngularJS directive reference.
https://www.w3schools.com/angular/angular_ref_directives.asp
Angular JS Directives ng-init Example:
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angu
lar.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body></html>
AngularJS ng-model Directive
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data. With the ng-model directive you can bind the value of an input
field to a variable created in AngularJS.
 AngularJS ng-repeat Directive
• The ng-repeat directive in AngularJS is used to display repeating values
defined in the controller.
• Sometimes we require displaying a list of items in the view. Then the ng-
repeat directive helps us display a list of items defined in the controller using
a view section of code.
• It is like for-in in Javascript language. The JavaScript for in statement loops
through the properties of an Object.

AngularJS ng-repeat Directive Example

Let’s look an example of ng-repeat directive in AngularJS:
AngularJS ng-repeat Directive
 AngularJS ng-repeat Directive Code Explanation:
1. In the controller, we first define our array of list items which we want to define in
the view. Over here we have defined an array called “TopicNames” which
contains three items. Each item consists of a name-value pair.
2. The array of TopicsNames is then added to a member variable called “topics”
and attached to our scope object.
3. We are using the HTML tags of <ul>(Unordered List) and <li>(List Item) to display
the list of items in our array. We then use the ng-repeat directive for going
through each and every item in our array. The word “tpname” is a variable which
is used to point to each item in the array topics.TopicNames.
4. In this, we will display the value of each array item.
If the code is executed successfully, the following Output will be shown when you
run your code in the browser. You will see all items of the array (Basically the
TopicNames in topics) displayed.
 Angular JS Modules and Controllers
• 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. Its like main () in c language.
• Controllers:
AngularJS application mainly relies on controllers to control the flow of data in the
application. A controller is defined using ng-controller directive. A controller is a
JavaScript object that contains attributes/properties, and functions. Each controller
accepts $scope as a parameter, which refers to the application/module that the
controller needs to handle.
https://www.w3schools.com/angular/angular_modules.asp#:~:text=An%20AngularJS%20module%20defines%20an,
always%20belong%20to%20a%20module.
https://www.tutorialspoint.com/angularjs/angularjs_controllers.htm#:~:text=A%20controller%20is%20a%20JavaScri
pt,the%20controller%20needs%20to%20handle.&text=The%20studentController%20is%20defined%20as,with%20%
24scope%20as%20an%20argument.
• How to create a Module:
A module is created by using the AngularJS function angular.module

Now,You can add controllers, directives, filters, and more, to your AngularJS
module myApp
• Adding a Controller to Module of your Angular JS application
You can Add a controller to your application, and refer to that controller with the
ng-controller directive:

OUTPUT
Why we are using "var app = angular.module('myApp', []);" ?
especially we need to know about square brackets in this line.
Answer: We are creating a module named myApp here,The first argument is the
module name myApp.
The second argument is an array of modules that this module depends on. Empty
square brackets denotes that this module does not have any dependencies on
any other modules.

https://stackoverflow.com/questions/32991765/why-we-are-using-var-app-
angular-modulemyapp-this-especially-i-nee
Angular JS Controllers Example code with initial values
Example code illustrating use of Controller by user entered values
Module 5: Angular JS Expressions
• Expressions are used to bind application data to HTML.
• Expressions are written inside double curly braces such as in {{
expression}}. Expressions behave similar to ng-bind directives.
• AngularJS expressions are pure JavaScript expressions and output the
data where they are used.
https://www.tutorialspoint.com/angularjs/angularjs_expressions.htm
Module 5: The following example shows the use of all the above-mentioned expressions
Module 5: Angular Js Expressions
Thank You