INTRODUCTION

TO ANGULAR JS
What is AngularJS?
■ AngularJS is a JavaScript framework that is used to build
browser based Web applications.
■ It is an open source project, which means it can be freely
used, changed and shared by anyone.
■ It is useful in building single-page Web applications to
load varying content dynamically based on user actions.
■ AngularJS provides developers an options to write client side
applications using JavaScript in a clean Model View
Controller (MVC) way.
■ Applications written in AngularJS are cross-browser
compliant. AngularJS automatically handles JavaScript code
suitable for each browser.
What is AngularJS?
■ It is written in JavaScript with a reduced jQuery
library called jQuery lite.
■ It is very useful for Single Page Application
(SPA).
■ It was originally developed in 2009 / 2010 by
Misko Hevery and Adam Abrons. It is now
maintained by Google.
■ Latest version of AngularJs is 1.8.2
What is AngularJS?
■ The objective of AngularJS is to provide a
framework that makes it easy to implement well-
designed and well-structured Web pages and
applications
■ AngularJS makes Web application and the code
very simple to write, test, and maintain.
Why do we Choose
AngularJS?
■ Some of the reasons:
■ It makes us implement MVC and makes it easy to
correctly implement MVC.
■ It provides simple and flexible filters that help us to
easily format data
■ AngularJS applications use less code than traditional
JavaScript applications
■ AngularJS applications need less Document Object
Model (DOM) manipulation.
Core Features
■ The core features of AngularJS are as follows −
■ MVC
■ Data-binding
■ Scope
■ Controller
■ Services
■ Filters
■ Directives
■ Templates
■ Routing
■ Dependency Injection etc
Pre-requisites
■ Html
■ Css
■ Javascript
■ Jquery
DOWNLOADING
INSTALLING
ANGULAR JS
DIRECTIVES &
EXPRESSIONS IN
ANGULAR JS
DIRECTIVES IN ANGULAR
JS
■ 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.
DIRECTIVES IN ANGULAR
JS
■ AngularJS directives are extended HTML attributes
with the prefix ng-.
■ The ng-app directive initializes or starts an
AngularJS application.
EXPRESSIONS IN
ANGULAR
■ AngularJS expression isJS
similar to JavaScript code snippets.
■ It works with numbers and strings.
– {{5+6}}
– {{“Hello Student!”}}
■ It can also work with JavaScript objects and arrays.
– {{ user.name }}
– {{ items[index] }}
■ You can write expressions wherever you like, AngularJS will
simply resolve the expression and return the result.
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-MODEL & NG-
BIND DIRECTIVE
IN ANGULAR JS
PRESENTER: MOHAMMAD ADIL
NG-MODEL DIRECTIVE
■ With the ng-model directive you can bind the
value of an input field to a variable created in
AngularJS.
■ The ng-model directive binds the value of HTML
controls (input, select, textarea) to application
data.
■ The ng-bind directive tells AngularJS to replace
the content of an HTML element with the value of
a given variable, or expression.
NG-INIT
DIRECTIVE
IN ANGULAR JS
NG-INIT DIRECTIVE
■ The ng-init directive initializes application data
like variables, arrays, objects, array of
objects etc.
■ It defines the initial value for an AngularJS
application and assigns values to the variables.
MVC IN
ANGULAR JS
PRESENTER: MOHAMMAD ADIL
MVC IN ANGULAR JS

■MVC stands for

■M – Model – Contains Application Data
■V – View – Contains Presentation Logic
■C – Controller – Creates communication path
between Model and View
MVC Concepts
REAL LIFE EXAMPLE OF
MVC
MVC Concepts
■MVC Architecture Pattern
■ AngularJS supports MVC architecture in software
development.
■ The Model holds the data and logic, the View
holds the visual layout and presentation, while the
Controller coordinates the Model and View.
Modules
■ It is a container used to hold other parts of an
application.
■ It has the option to define its own controllers,
services, filter, directives, and so on.
■ A module is created by using the AngularJS
function angular.module
CONTROLLERS
■ AngularJS applications depend on controllers to control the flow of
data in the application.
■ We add ‘myController’ to the app using the app.controller() method.

app.controller("myController",function($scope)
{
$scope.name = "";
});
■ Controllers are JavaScript objects which have properties and
functions.
■ We use a controller in an application by using “ng-controller”
directive.
CONTROLLERS
■ Responsibilities of Controllers
■ Making available Data to UI
■ Managing presentation
■ Handling user inputs
■ Processing data
DATA BINDING IN

ANGULAR JS
OBJECTIVES
■ WHAT IS DATA BINDING
■ TYPES OF DATA-BINDING
What is data binding?
■ Data binding is a process of combining data
between the model and the view.
TYPES OF DATA
BINDING
■ 1. ONE WAY DATA-BINDING
■ 2. TWO WAY DATA-BINDING
1. ONE WAY DATA-
BINDING
MODEL

DATA FLOWS FROM

MODEL TO VIEW ONLY

VIEW
ONE WAY DATA-BINDING
■ One-way data binding in AngularJS means
binding data from Model to View.
■ In one way data- binding data flows from the
scope/controller to the view
■ 'ng-bind' is an angular directive used for
achieving one-way data binding
TWO WAY DATA-BINDING

MODEL

DATA FLOWS FROM DATA FLOWS FROM

VIEW TO MODEL MODEL TO VIEW

VIEW
TWO WAY DATA-BINDING
■ Two Way Data binding is the synchronization
between the model and the view.
■ When data in the model changes, the view
reflects the change, and when data in the view
changes, the model is updated as well.
■ 'ng-model' is an angular directive used for
achieving two-way data binding
EVENTS AND EVENT
HANDLING IN
ANGULAR JS
What are Events?
■ Events are "things" that happen to HTML
elements.
■ AngularJs can "react" on these events.
■ Here are some examples of events:
– An HTML web page has finished loading
– An HTML input field was changed
– An HTML button was clicked
Mouse Events
■ On Mouse click

■ ng-click
■ ng-mousedown
■ ng-mouseup
■ ng-dblclick
Mouse Events
■ Mouse events occur when the cursor moves
over an element, in this order:

■ ng-mouseover
■ ng-mouseenter
■ ng-mousemove
■ ng-mouseleave
ng-change directive
■ The ng-change directive tells AngularJS what to do when
the value of an HTML element changes like textbox, select,
textarea.
■ The ng-change directive requires a ng-model directive to
be present.
■ The ng-change event is triggered at every change in the
value. It will not wait until all changes are made, or when
the input field loses focus.
■ The ng-change event is only triggered if there is a actual
change in the input value, and not if the change was made
from a JavaScript.
ng-focus and ng-blur
directive
■ The ng-focus directive tells AngularJS what to do
when an HTML element gets focus.

■ The ng-blur directive tells AngularJS what to do

when an HTML element loses focus.
KeyBoard Events
■ Executes when we enter a keyboard button.

■ ng-keydown
■ ng-keypress
■ ng-keyup
Copy Paste Events
■ Executes when do some cut copy paste
operation on input fields.

■ ng-copy
■ ng-cut
■ ng-paste
NG-REPEAT IN
ANGULAR JS
NG-REPEAT IN ANGULAR
JS
■ The ng-repeat directive repeats a set of HTML, a
given number of times.
■ The set of HTML will be repeated once per item in
a collection.
■ The collection must be an array or an object.
NG-REPEAT IN ANGULAR
JS
expression An expression that specifies
how to loop the collection.

Legal Expression examples:

x in records

(key, value) in myObj

x in records track by $id(x)

FILTERS IN
ANGULAR JS
Filters
■ Filters can be added in AngularJS to format data.
■ They format the value of an expression for displaying
to the end user.
■ They are added to expressions by using the pipe
character |, followed by a filter.
■ Filters can be used in view templates as well as in
controllers.
■ We can use more than one filter in an expression.
AngularJS Filters
■ AngularJS provides filters to transform
data:
■ Lowercase - Format a string to lower case.
■ Uppercase - Format a string to upper case
■ Number - Format a number to a string.
■ Currency - Format a number to a currency
format.
■ Date - Format a date to a specified format.
DATE FILTER
■ The date filter formats a date to a specified
format.
FORMATS FOR DATE
FILTER
■ "yyyy" year (2016)
■ "yy" year (16)
■ "y" year (2016)

■ "MMMM" month (January)

■ "MMM" month (Jan)
■ "MM" month (01)
■ "M" month (1)
FORMATS FOR DATE
FILTER
■ "dd" day (06)
■ "d" day (6)
■ "EEEE" day (Tuesday)
■ "EEE" day (Tue)
FORMATS FOR TIME IN
DATE FILTER
■ "HH" hour, 00-23 (09)
■ "H" hour 0-23 (9)
■ "hh" hour in AM/PM, 00-12 (09)
■ "h" hour in AM/PM, 0-12 (9)

■ "mm" minute (05)

■ "m" minute (5)
FORMATS FOR TIME IN
DATE FILTER
■ "ss" second (05)
■ "s" second (5)
■ "sss" millisecond (035)
■ "a" (AM/PM)
FORMATS FOR DATE
FILTER
■ The format value can also be one of the following predefined
formats:

■ "short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM)

■ "medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05
AM)
■ "shortDate" same as "M/d/yy" (1/5/16)
■ "mediumDate" same as "MMM d, y" (Jan 5, 2016)
■ "longDate" same as "MMMM d, y" (January 5, 2016)
■ "fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016)
FORMATS FOR DATE
FILTER
■ The format value can also be one of the
following predefined formats:

■ "shortTime" same as "h:mm a" (9:05 AM)

■ "mediumTime" same as "h:mm:ss a" (9:05:05
AM)
ORDER-BY FILTER IN
ANGULAR JS
orderBy Filter

■It will provide sorting of arrays in

ascending or descending order.
FILTER
FILTER IN ANGULAR
JS
FILTER
■ Filter –
– Select a subset of items from an array.
– The “filter” Filter in AngularJS is used to filter
the array and object elements and return the
filtered items
– In other words, this filter selects a subset (a
smaller array containing elements that meet
the filter criteria) of an array from the original
array.
LIMIT-TO FILTER
IN
ANGULAR JS
limitTo
■ limitTo
– Limits an array/string, into a specified
number of elements/characters.
– When the limitTo filter is used for arrays, it
returns an array containing only the
specified number of items.
– When the limitTo filter is used for strings, it
returns a string containing, only the
specified number of characters.
limitTo
■ When the limitTo filter is used for numbers, it
returns a string containing only the specified
number of digits.
■ Use negative numbers to return elements
starting from the end of the element, instead
of the beginning.
NG-INCLUDE
DIRECTIVE
IN ANGULAR JS
NG-INCLUDE DIRECTIVE
■ The ng-include directive includes HTML from an
external file.
■ The included content will be included as child
nodes of the specified element.
■ By default, the included file must be located on
the same domain as the document.
NG-SHOW AND NG-
HIDE DIRECTIVES IN
ANGULAR JS
NG-SHOW DIRECTIVE
■ The ng-show directive shows the specified
HTML element if the expression evaluates to true,
otherwise the HTML element is hidden.
NG-HIDE DIRECTIVE
■ The ng-hide directive hides the HTML element if
the expression evaluates to true.
■ ng-hide is also a predefined CSS class in
AngularJS, and sets the element's display to none.
SERVICES IN
ANGULAR JS
Introduction to Services
■ Services’ refer to simple objects that does some
sort of work.
■ A service in angularjs is simple an object that
provide some sort of service that can be reused
with in an angularjs application.
■ They are JavaScript functions and are responsible
to do a specific task only.
■ They are injected using dependency injection
mechanism of AngularJS.
■ AngularJS has about 30 built-in services.
Why do we need
services
■ Single Responsibility principle.
– It states that an object should only have single
responsibility.
Introduction to Services
■ Some built-in services provided by AngularJS are,
■ $http
■ $route
■ $location
■ $interval
■ $window
■ $timeout
$location service
■ The $location service has methods which return
information about the location of the current web
page.
■ Note that the $location service is passed in to
the controller as an argument.
■ In order to use the service in the controller, it
must be defined as a dependency.
$location service
■ absUrl()
■ Protocol()
■ Host()
■ Port()
The $interval Service
■ The $interval service is AngularJS' version of the
window.setInterval function.
$timeout service
■ The $timeout service can be used to call
another JavaScript function after a given time
delay.
■ The $timeout service only schedules a single call
to the function.
■ For repeated calling of a function, you can use
$interval.
$window service
■ AngularJs includes $window service which
refers to the browser window object.
■ In the JavaScript, window is a global object which
includes many built-in methods like alert(),
prompt() etc.
■ The $window service is a wrapper
around window object
Why use Services?
■ For many services, like the $location service, it
seems like you could use objects that are already in
the DOM, like the window.location object, and you
could, but it would have some limitations, at least
for your AngularJS application.
■ AngularJS constantly supervises your application,
and for it to handle changes and events properly,
AngularJS prefers that you use the $location
service instead of the window.location object.
ROUTING IN
ANGULAR JS
ROUTING OR ROUTE
■ When creating single page applications, routing is
very important.
■ The ngRoute module helps our application to
become a Single Page Application.
■ It routes our application to different pages without
reloading the entire application.
ROUTING OR ROUTE
ROUTING OR ROUTE
■ To make our applications ready for routing, we
must include the AngularJS ng-route module, in
addition to angular.js.
■ Ng-route provides the $routeProvider method.
■ Using the $routeProvider, we can configure
different routes in our application.
What do I Need?
■ To make your applications ready for routing, you
must include the AngularJS Route module.
■ Now your application has access to the route
module, which provides the $routeProvider.
■ Use the $routeProvider to configure different
routes in your application
Where Does it Go?

■ Your application needs a container to put the

content provided by the routing.
■ This container is the ng-view directive.
Where Does it Go?
■ There are three different ways to include the
ng-view directive in your application:
■ 1. <div ng-view> </div>

■ 2. <ng-view></ng-view>

■ 3. <div class="ng-view"> </div>

$routeProvider
■ Define the $routeProvider using the config
method of your application.
■ Work registered in the config method will be
performed when the application is loading.
TemplateUrl and
template
■ templateUrl returns the url of the html page.
■ template return some template or combination
of elements as a template.
SCOPE IN
ANGULAR JS
SCOPE IN ANGULAR JS
■ The scope of AngularJS is the model.
■ It is a JavaScript object with properties and
methods available for both the view and the
controller.
■ It gives the execution context for expressions
used in the application.
SCOPE IN ANGULAR JS
■ The scope is the binding part between the HTML
(view) and the JavaScript (controller).
■ The scope 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.
■ Syntax:
■ app.controller('myCtrl', function($scope) {
■ $scope.carname = "Volvo";
■ });
How to Use the Scope?
■ When adding properties to the $scope object in
the controller, the view (HTML) gets access to
these properties.
Understanding the
Scope
■ 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
Understanding the
Scope
■ The $scope is glue between a controller and view
(HTML). It transfers data from the controller to
view and vice-versa.

VIEW MODEL
Understanding the
Scope
■ As we have seen in the controller section, we can
attach properties and methods to the $scope
object inside controller function.
■ The view can display $scope data using an
expression, ng-model, or ng-bind directive
Understanding the
Scope
■ The three types of scopes are:

– Isolated scope
– Shared scope
– Inherited scope
Root Scope
■All applications have a $rootScope which is
the scope created on the HTML element that
contains the ng-app directive.
■The rootScope is available in the entire
application.
■If a variable has the same name in both the
current scope and in the rootScope, the
application uses the one in the current scope.
Scope Inheritance

PARENT

CHILD
FORM
VALIDATION
IN ANGULAR-JS
Introduction to Forms
Validation
■ Forms are the major way users communicate with the
apps we develop and are an important mechanism of
modern Websites and applications.
■ They are used to collect data form the users.
■ The data collected by the form is validated before
sending it to the server.
■ AngularJS continuously oversees the status of the
form and their input fields such as input, textarea,
select and help us advise the user about the current
state.