Angular JS

• Open source web app framework

• AngularJS version 1.0 was released in
2012.Miško Hevery, a Google employee,
started to work with AngularJS in 2009.
• AngularJS extends HTML with new
attributes and it is perfect for Single Page
Applications (SPAs),
• Easy to learn.

Workshop on Advanced JavaScript & Fra

meworks
General features :

• We can create rich internet application by using

Angular JS.
• Angular js Allow us to write the client-side code
using javascript.
• AngularJs provides cross-browser compliant and it
automatically handles JavaScript code suitable for
each browser.
• Angularjs is used to build high-performance,
large scale, and easy-to-maintain web
applications.

Workshop on Advanced JavaScript & Fra

meworks
Core features :

1. Data-binding :
2. Scope :
3. Controller :
4. Services :
5. Filters :
6. Dependency Injection :
7. Routing :
8. Templets :
9. Directives :
10. Deep linking :

Workshop on Advanced JavaScript & Fra

meworks
• AngularJS extends HTML attributes
with Directives, and binds data to HTML
with Expressions.
• 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/angularjs/1.6.9/angular.min.js"></script>

Workshop on Advanced JavaScript & Fra

meworks
AngularJS Directives

• AngularJS directives are extended HTML

attributes with the prefix ng-.

• The ng-app directive initializes an

AngularJS application and it defines
the root element of an AngularJS, this
directive will auto-
bootstrap (automatically initialize) the
application when a web page is loaded.

Workshop on Advanced JavaScript & Fra

meworks
• The ng-init directive defines initial
values for an AngularJS application.
• The ng-model directive binds the value of
HTML controls (input, select, textarea) to
application data.
– Provide type validation for application data (number, email, required).
– Provide status for application data (invalid, dirty, touched, error).
– Provide CSS classes for HTML elements.
– Bind HTML elements to HTML forms.
• The ng-bind directive binds application data
to the HTML view.

Workshop on Advanced JavaScript & Fra

meworks
• 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.
• ng-repeat directive, each repetition has
access to the current repetition object:

Workshop on Advanced JavaScript & Fra

meworks
AngularJS Scope

The scope is the binding part between the HTML

(view) and the JavaScript (controller) and it is an
object with the available properties and methods.

The scope is available for both the view and the

controller.

How to Use the Scope?

When you make a controller in AngularJS, you pass
the $scope object as an argument:

Workshop on Advanced JavaScript & Fra

meworks
 AngularJS Expressions

Inside double braces: {{ expression }}.

Can also be written inside a directive: ng-bind="expression".

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.
• Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

Workshop on Advanced JavaScript & Fra

meworks
AngularJS Modules and Controllers

• An AngularJS module defines an application.

• The module is a container for the different

parts of an application and it is a container
for the application controllers, Controllers
always belong to a module.

• The [] parameter in the module definition

can be used to define dependent modules.

Workshop on Advanced JavaScript & Fra

meworks
• <div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

• Without the [] parameter, you are

not creating a new module,
but retrieving an existing one.

Workshop on Advanced JavaScript & Fra

meworks
Adding a Controller:
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

Workshop on Advanced JavaScript & Fra

meworks
 AngularJS Forms

• Forms in AngularJS provides data-binding and validation of

input controls.

• The ng-model directive can provide type validation for

application data (number, e-mail, required):

<form ng-app="" name="myForm">

Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a
valid e-mail address</span><br><br>
You have entered:{{text}}
</form>

Workshop on Advanced JavaScript & Fra

meworks
• Input controls are the HTML input elements:
– input elements
– select elements
– button elements
– textarea elements
• Data-Binding
Input controls provides data-binding by using the ng-
model directive.
<form>
First Name: <input type="text" ng-
model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Workshop on Advanced JavaScript & Fra
meworks
Checkbox
A checkbox has the value true or false. Apply the ng-model directive
to a checkbox, and use its value in your application.

<h2> Checkbox Buttons: </h2><br>

Select Programming languages:
<input type="checkbox" ng-model="myVar1">Python
<input type="checkbox" ng-model="myVar2">Java
<input type="checkbox" ng-
model="myVar3">HTML,CSS.Javascript
<h2 ng-show="myVar1">I have selected 1st option </h2>
<h2 ng-show="myVar2">I have selected 2nd option </h2>
<h2 ng-show="myVar3">I have selected 3rd option </h2>

Workshop on Advanced JavaScript & Fra

meworks
Radio buttons
Bind radio buttons to your application with the ng-model directive.
Radio buttons with the same ng-model can have different values, but
only the selected one will be used.

<h2> Radio Buttons </h2><br>

Select Highest Qualification:
<input type="radio" ng-model="myVar"
value="BE">B.E
<input type="radio" ng-model="myVar"
value="MTech">M.Tech
<input type="radio" ng-model="myVar"
value="Phd">Phd

Workshop on Advanced JavaScript & Fra

meworks
Selectbox
Bind select boxes to your application with the ng-
model directive.
The property defined in the ng-model attribute will have the
value of the selected option in the selectbox.
<h2> Selectbox:</h2>
Select a Country:
<select ng-model="myVar" >
<option value="">
<option value="in">India
<option value="au">Australia
<option value="us">United States
</select>

Workshop on Advanced JavaScript & Fra

meworks
AngularJS Services

In AngularJS, a service is a function, or object, that

is available for, and limited to.
AngularJS has about 30 built-in services.
The $location service
Example: The $location service has methods which
return information about the location of the current
web page:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,
$location) {
$scope.myUrl = $location.absUrl();
});

Workshop on Advanced JavaScript & Fra

meworks
• The $timeout Service
• var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,
$timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
• The $http Service
• The service makes a request to the server,
and lets your application handle the
response.
Workshop on Advanced JavaScript & Fra
meworks
AngularJS Routing

• The ngRoute module helps your application to

become a Single Page Application.

• If you want to navigate to different pages in your

application, but you also want the application to
be a SPA (Single Page Application),

• The ngRoute module routes your application to

different pages without reloading the entire
application.

Workshop on Advanced JavaScript & Fra

meworks
 AngularJS Filters

• Filters can be added in AngularJS to format

data.
•currency Format a number to a currency format.
•date Format a date to a specified format.
•filter Select a subset of items from an array.
•json Format an object to a JSON string.
•limitTo Limits an array/string, into a specified number of
elements/characters.
•lowercase Format a string to lower case.
•number Format a number to a string.
•orderBy Orders an array by an expression.
•uppercase Format a string to upper case.

Workshop on Advanced JavaScript & Fra

meworks
Example:
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>

<script>
angular.module('myApp', []).controller('personCtrl',
function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>

Workshop on Advanced JavaScript & Fra

meworks
Example: Programs on

1. Directives Expression
2. Services
3. Routing
4. Forms
5. Filters
6. Modules, Controllers, & Scope

https://replit.com/@FakhruddinBasha/Angular#index.html

Workshop on Advanced JavaScript & Fra

meworks
Workshop on Advanced JavaScript & Fra
meworks