Introduction to AngularJS By Bharat Makwana

A Presented By
Bharat Makwana
CTO, WOXI SOFTWARE LLP

Mr Bharat Makwana
Chief Technology Officer
WOXI SOFTWARE LLP
Catch me If you can at:
bharat.woxi@gmail.com
+91 956 111 9771
https://www.linkedin.com/in/makwanabharat/
Who Am I?

Objectives
● Overview
● Where AngularJs reside?
● MVC Architecture
● Core Features
● Pros & Cons
● Hello World in AngularJs
● Directives
● Expression
● Controllers
● Filters
● Tables
● Modules
● Includes
● Views
● Scope
● Services
● Dependency Injection
● Custom Directives
● Internationalization
● Introduction to NodeJs

Overview
What is 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.6.7
Official Definition of
AngularJS
AngularJS is a structural framework for
dynamic web apps. It lets you use HTML as
your template language and lets you extend
HTML's syntax to express your application's
components clearly and succinctly.
Angular's data binding and dependency
injection eliminate much of the code you
currently have to write. And it all happens
within the browser, making it an ideal partner
with any server technology.

MVC Architecture
Model View Controller or MVC as it is popularly called, is a software design
pattern for developing web applications. A Model View Controller pattern is made
up of the following three parts −
● Model − It is the lowest level of the pattern responsible for maintaining data.
● View − It is responsible for displaying all or a portion of the data to the user.
● Controller − It is a software Code that controls the interactions between the
Model and View.

Pros & Cons of AngularJs
Pros :
● AngularJS provides capability to create Single
Page Application in a very clean and
maintainable way.
● AngularJS provides data binding capability to
HTML thus giving user a rich and responsive
experience
● AngularJS code is unit testable.
● AngularJS uses dependency injection and
make use of separation of concerns.
● AngularJS provides reusable components.
● With AngularJS, developer write less code and
get more functionality.
● In AngularJS, views are pure html pages, and
controllers written in JavaScript do the business
processing
Cons :
Though AngularJS comes with lots of plus
points but same time we should consider the
following points −
● Not Secure − Being JavaScript only
framework, application written in
AngularJS are not safe. Server side
authentication and authorization is must to
keep an application secure.
● Not degradable − If your application user
disables JavaScript then user will just see
the basic page and nothing more.

The AngularJS Components
The AngularJS framework can be divided into following three major 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.

Hello World in AngularJs
<html>
<head>
<title>AngularJS Hello World Application</title>
</head>
<body>
<h1>Say hello</h1>
<div ng-app = "">
<p>Enter your Name : <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</body>
</html>

AngularJs - Directives
AngularJS directives are used to
extend HTML. These are special
attributes starting with ng- prefix.
We're going to discuss following
directives −
● ng-app − This directive starts
an AngularJS Application.
● ng-init − This directive
initializes application data.
● ng-model − This directive
binds the values of
AngularJS application data to
HTML input controls.
● ng-repeat − This directive
repeats html elements for
each item in a collection.
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-IN',name:India}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src =”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</body>
</html>

AngularJs - Expressions
Expressions are used to bind
application data to html.
Expressions are written
inside double braces like {{
expression}}. Expressions
behaves in same way as
ng-bind directives.
● Using numbers
● Using strings
● Using object
● Using array
<html>
<head>
<title>AngularJS Expressions</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "quantity = 1;cost = 30; student =
{firstname:'Mahesh',lastname:'Parashar',rollno:101};marks = [80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<p>Expense on Books : {{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</body>
</html>

AngularJs - 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 containing
attributes/properties and
functions.
● Each controller accepts
$scope as a parameter
which refers to the
application/module that
controller is to control.
<div ng-app = "" ng-controller = "studentController">
...
</div>
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
You are entering: {{student.fullName()}}

AngularJs - Filters
● Filters are used to
change modify
the data and can
be clubbed in
expression or
directives using
pipe character.
● Uppercase - converts a text to upper case text.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
● Orderby - orders the array based on provided criteria.
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
● Currency - formats text in a currency format.
● Lowercase - converts a text to lower case text.
● Filter - filter the array to a subset of it based on provided criteria.

AngularJs - Tables
● Table data is
normally
repeatable by
nature. ng-repeat
directive can be
used to draw
table easily.
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>

AngularJs - Modules
AngularJS supports modular
approach. Modules are
used to separate logics
say services, controllers,
application etc. and keep
the code clean. We define
modules in separate js files
and name them as per the
module.js file.
● Application Module −
used to initialize an
application with
controller(s).
● Controller Module − used
to define the controller.
Application Module - mainApp.js
var mainApp = angular.module("mainApp", []);
Controller Module - studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh", lastName: "Parashar", fees:500,
subjects:[ {name:'Hindi',marks:67} ],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
Use Modules
<div ng-app = "mainApp" ng-controller = "studentController">
<script src = "mainApp.js"></script>
<script src = "studentController.js"></script>
</div>

AngularJs - Includes
HTML does not support
embedding html pages within
html page. To achieve this
functionality following ways are
used −
● Using Ajax − Make a
server call to get the
corresponding html page
and set it in innerHTML of
html control.
● Using Server Side
Includes − JSP, PHP and
other web side server
technologies can include
html pages within a
dynamic page.
Using AngularJS, we can embed HTML pages within a HTML page using
ng-include directive.
<div ng-app = "" ng-controller = "studentController">
<div ng-include = "'main.htm'"></div>
<div ng-include = "'subjects.htm'"></div>
</div>

AngularJs - Views
AngularJS supports Single Page Application via multiple views on a single page. To do this AngularJS has provided ng-view and
ng-template directives and $routeProvider services.
ng-view
ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the
configuration.
Usage
Define a div with ng-view within the main module.
<div ng-app = "mainApp">
<div ng-view></div>
</div>

AngularJs - Scope
Scope is a special javascript object which plays the role of joining controller with the views. Scope contains the model
data. In controllers, model data is accessed via $scope object.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
Following are the important points to be considered in above example.
● $scope is passed as first argument to controller during its constructor definition.
● $scope.message and $scope.type are the models which are to be used in the HTML page.
● We've set values to models which will be reflected in the application module whose controller is shapeController.
● We can define functions as well in $scope.

AngularJs - Services
AngularJS supports the concepts of "Separation of Concerns" using services architecture. Services are
javascript functions and are responsible to do a specific tasks only. This makes them an individual entity
which is maintainable and testable. Controllers, filters can call them as on requirement basis. Services
are normally injected using dependency injection mechanism of AngularJS.
AngularJS provides many inbuilt services for example, $https:, $route, $window, $location etc. Each
service is responsible for a specific task for example,
$https: is used to make ajax call to get the server data. $route is used to define the routing information
and so on.
Inbuilt services are always prefixed with $ symbol.
There are two ways to create a service. a) Factory b) service

AngularJs - Dependency Injection
Dependency Injection is a software design pattern in which components are given their dependencies
instead of hard coding them within the component. This relieves a component from locating the
dependency and makes dependencies configurable. This helps in making components reusable,
maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It provides following core components
which can be injected into each other as dependencies.
● value
● factory
● service
● provider
● constant

AngularJs - Custom Directives
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are
defined using "directive" function. A custom directive simply replaces the element for which it is
activated. AngularJS application during bootstrap finds the matching elements and do one time activity
using its compile() method of the custom directive then process the element using link() method of the
custom directive based on the scope of the directive. AngularJS provides support to create custom
directives for following type of elements.
● Element directives − Directive activates when a matching element is encountered.
● Attribute − Directive activates when a matching attribute is encountered.
● CSS − Directive activates when a matching css style is encountered.
● Comment − Directive activates when a matching comment is encountered.

AngularJs - Internationalization
AngularJS supports inbuilt internationalization for three types of filters currency, date and numbers. We
only need to incorporate corresponding js according to locale of the country. By default it handles the
locale of the browser. For example, to use Danish locale, use following script.
<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>

Introduction To
NodeJS
● Node.js is an open source
server framework
● Node.js is free
● Node.js runs on various
platforms (Windows, Linux,
Unix, Mac OS X, etc.)
● Node.js uses JavaScript on
the server

Why Node.Js?
Why Node.js?
Node.js uses asynchronous programming!
A common task for a web server can be to open a file on the server and return the
content to the client.
Here is how PHP or ASP handles a file request:
1. Sends the task to the computer's file system.
2. Waits while the file system opens and reads the file.
3. Returns the content to the client.
4. Ready to handle the next request.

Why Node.Js?
Here is how Node.js handles a file request:
1. Sends the task to the computer's file system.
2. Ready to handle the next request.
3. When the file system has opened and read the file, the server returns the
content to the client.
Node.js eliminates the waiting, and simply continues with the next request.
Node.js runs single-threaded, non-blocking, asynchronously programming, which
is very memory efficient.

Let’s Dive Together into the
World of AngularJs

Thank You
Any Questions?
Any Query?

Introduction to AngularJS By Bharat Makwana

More Related Content

What's hot (20)

Similar to Introduction to AngularJS By Bharat Makwana (20)

Recently uploaded (20)

Introduction to AngularJS By Bharat Makwana