Angular JS & Node JS

Angular JS
 Introduction

• AngularJS is a very powerful JavaScript

Framework. It is used in Single Page Application
(SPA) projects.
• It extends HTML DOM 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.
• It is licensed under the Apache license version
2.0.
 Why to Learn AngularJS?

• AngularJS was originally developed in 2009 by

Misko Hevery and Adam Abrons. It is now
maintained by Google.
• AngularJS is a efficient framework that can create
Rich Internet Applications (RIA).
• 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.
• Overall, AngularJS is a framework to build large
scale, high- performance, an d easy-to-maintain web applications.
 Core
•
Features
Data-binding − It is the automatic synchronization of data between model and view components.
• Scope − These are objects that refer to the model. They act as a glue between controller and view.
• Controller − These are JavaScript functions bound to a particular scope.
• Services − AngularJS comes with several built-in services such as $http to make a XMLHttpRequests. These are singleton objects which
are instantiated only once in app.
• Filters − These select a subset of items from an array and returns a new array.
 Core
Features
• Directives − Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom
HTML tags that serve as new, custom widgets. AngularJS has built-in directives such as ngBind, ngModel, etc.
• Templates − These are the rendered view with information from the controller and model. These can be a single file (such as index.html)
or multiple views in one page using partials.
• Routing − It is concept of switching views.
 Core
Features
• Model View Whatever − MVW is a design pattern for dividing an application into different parts called Model, View, and Controller,
each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM
(Model-View- ViewModel).
• Deep Linking − Deep linking allows to encode the state of application in the URL so that it can be bookmarked. The application can
then be restored from the URL to the same state.
• Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and
test the applications easily.
Concepts
 Advantages of AngularJS

• It provides the capability to create Single Page Application in a very clean and maintainable way.
• It provides data binding capability to HTML. Thus, it gives 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, the developers can achieve more
functionality with short code.
• In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
 Disadvantages of AngularJS

• 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 the user of your application disables JavaScript, then nothing would be visible, except the basic page.
 AngularJS - 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.
 AngularJS - MVC Architecture
• MVC is popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller
receives all requests for the application and then works with the model to prepare any data needed by the view. The view then uses the
data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represented as follows.
AngularJS - MVC Architecture

• The Model-
The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update
itself.
• The View-
A presentation of data in a particular format, triggered by the controller's decision to present the data. They are script-based template systems
such as JSP, ASP, PHP and very easy to integrate with AJAX technology.
• The Controller

The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then
performs business operations that modify the state of the data model.
AngularJS Directives

The AngularJS framework can be divided into 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.
 Creating AngularJS Application

Step 1: Load framework

• Being a pure JavaScript framework, it can be added using <Script> tag.

• <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angul ar.min.js"> </script>
 Creating AngularJS Application

Step 2: Define AngularJS application using ng-

app directive

• <div ng-app = ""> ... </div>

Step 3: Define a model name using ng-model directive
• <p>Enter your Name: <input type = "text" ng-model = "name"></p>
 Creating AngularJS Application

• Step 4: Bind the value of above model defined using ng-bind directive
• <p>Hello <span ng-bind = "name"></span>!</p>
 Code Hello

<html>
<head>
<title>AngularJS First Application</title>
</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>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

</script>

</body>
</html>
 AngularJS - Directives

• AngularJS directives are used to extend HTML. They are special attributes starting with ng-prefix. Let us discuss the following
directives −
• ng-app − This directive starts an AngularJS Application.
• ng-init − This directive initializes application data.
• ng-model − This directive defines the model that is variable to be used in AngularJS.
• ng-repeat − This directive repeats HTML elements for each item in a collection.
• List of other AngularJS directives
ng-app directive

• The ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application
when the web page containing AngularJS Application is loaded.
• In the following example, we define a default AngularJS application using ng-app attribute of a <div> element.
• <div ng-app = ""> ... </div>
ng-init directive

• The ng-init directive initializes an AngularJS Application data. It is used to assign values to the variables. In the following example, we
initialize an array of countries. We use JSON syntax to define the array of countries.

• <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},

{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> ... </div>
 ng-model directive

• The ng-model directive defines the model/variable to be used in AngularJS Application. In the following example, we define a model
named name.
• <div ng-app = ""> ... <p>Enter your Name: <input type = "text" ng-model = "name"></p> </div>
ng-repeat directive

• The ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over the array of
countries.
<div ng-app = ""> ... <p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li>
</ol>
</div>
AngularJS Expressions

• AngularJS expressions can be written inside double braces: {{ expression }}.

• AngularJS expressions can also be written inside a directive: ng-bind="expression".
• AngularJS will resolve the expression, and return the result exactly where the expression is written.
• AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
• Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
 Example

• <!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs

/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="">

<p>My first expression: {{ 5 + 5 }}</p>

</div>

</body>

</html>
AngularJS Controllers

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

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.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>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

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

</body>
</html>
AngularJS Filters

AngularJS provides filters to transform 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.

Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{firstName + " " + lastName | uppercase }}</p>

</div>

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

</body>
</html>
 AngularJS Tables

• The ng-repeat directive is perfect for displaying tables.

 Example

<div ng-app="myApp" ng-controller="customersCtrl">

<table>

<tr ng-repeat="x in names">

<td>{{ x.Name }}</td>

<td>{{ x.Country }}</td>

</tr>

</table>

</div>
 AngularJS HTML DOM

• AngularJS has directives for binding application data to the attributes of HTML DOM elements.
 Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch }}
</p>
</div>

</body>
</html>
 Explaination

• The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute.
• The ng-model directive binds the value of the HTML checkbox element to the value

of mySwitch.

• If the value of mySwitch evaluates to true, the button will be disabled:

 AngularJS Forms

• Forms in AngularJS provides data-binding and validation of input controls.

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.
• <input type="text" ng-model="firstname">
• The application does now have a property named firstname.
• The ng-model directive binds the input controller to the rest of your application.
• The property firstname, can be referred to in a controller:
 Checkbox

• A checkbox has the value true or false. Apply

the ng-model directive to a checkbox, and use its
value in your application.

• <form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>

Radiobuttons

• 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.
• <form>
Pick a topic:
<input type="radio" ng-
model="myVar"
value="dogs">Dogs
<input type="radio" ng-
model="myVar"
value="tuts">Tutorials
<input type="radio" ng-model="myVar"
value="cars">Cars
</form>
Select box

• 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 select box.
• <form>
Select a topic:
<select ng-model="myVar">
<option value=“">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>