Unit I: Angular JS –Introduction to Angular JS, Java Script vs Angular, MVC Framework,

Component Based Model, Setting Up Angular, Installation of Node and NPM, Angular CLI, Creating
and Running Project, Dependencies, App Component, Anatomy of Component, Creating
Components.

Definition
AngularJs is a Javascript open-source front-end framework that is mainly used to develop
single-page web applications(SPAs). It is a continuously growing and expanding
framework which provides better ways for developing web applications. It changes the
static HTML to dynamic HTML. Its features like dynamic binding and dependency
injection eliminate the need for code that we have to write otherwise. AngularJs is rapidly
growing and because of this reason, we have different versions of AngularJs with the latest
stable being 1.7.7. It is also important to note that Angular is different from AngularJs. It is
an open-source project which can be freely used and changed by anyone. It extends HTML
attributes with Directives, and data is bound with HTML.
History:
AngularJs was originally developed in 2008-2009 by Misko hevery and Adam abrons and
is now maintained by Google.
Why use it?
 Easy to work with: All you need to know to work with AngularJs is the basics
of HTML, CSS, and Javascript, not necessary to be an expert in these
technologies.
 Time-saving: AngularJs allows us to work with components and hence we can
use them again which saves time and unnecessary code.
 Ready to use a template: AngularJs is mainly plain HTML, and it mainly
makes use of the plain HTML template and passes it to the DOM and then the
AngularJS compiler. It traverses the templates and then they are ready to use.
Key Features:
Model View Controller(MVC):An architecture is basically a software pattern used to
develop an application. It consists of three components in general, they are:
 Model: used to manage the application data.
 View: responsible for displaying the application data.
 Controller: the main job is to connect the model and the view component.
Normally when we talk about MVC architecture, we have to split our applications into
these three components and then write the code to connect them. However, in AngularJs all
we have to do is split the application into MVC and it does the rest by itself. It saves a lot
of time and allows you to finish the job with less code.
Data Model Binding: Data Binding in AngularJS is a two-way process, i.e the view layer
of the MVC architecture is an exact copy of the model layer. You don’t need to write
special code to bind data to the HTML controls. Normally in other MVC architectures, we
have to continuously update the view layer and the model layer to remain in sync with one
another. In AngularJs it can be said that the model layer and the view layer remain
synchronized with each other. Like when the data in the model changes, then the view layer
reflects the change and vice versa. It happens immediately and automatically which helps in
making sure that the model and the view are updated at all times.

Templates:
The main advantage of using AngularJS is how it makes use of the templates. Normally
what happens is that the templates are passed by the browser into DOM, then DOM
becomes the input of the AngularJS compiler and then AngularJS traverses the DOM
template for rendering instructions which are called directives. The other siblings of
AngularJS work differently as they make use of the HTML String whereas AngularJs does
not manipulate the template strings. Using the DOM is what gives us the privilege to extend
the directive vocabulary or even abstract them into reusable components.
Unit Testing ready:- The concern of Google’s designer was not only developed Angular
but also developed a testing framework called “Karma” which helps in designing unit tests
for AngularJS applications.
Benefits of AngularJS:
Depending Injection: Dependency Injection is a software design pattern. It works on the
basis of Inversion of Control. Inversion control means objects do not create other objects.
Instead, they get these objects from an outside source. The dependent object is not created
by the primary object after that then uses its methods. Instead, an external source creates
the dependent object and gives it to the source object for further usage. On the basis of
dependency injection, we create a service to acquire all the information from the database
and get into the model class. In Angular.JS, dependencies are injected by using an
“injectable factory method” or “constructor function”. These components can be injected
with “service” and “value” components as dependencies. The $http service is normally
defined from within the controller in the following manner.

sampleApp.controller (‘AngularJSController’, function ($scope, $http)

Java Script vs Angular:

JavaScript is a lightweight, object-oriented scripting language used to build dynamic HTML

pages with interactive effects on a web page that runs in the client's web browser. It's a client-
side scripting language that provides interactive effects to web pages to make them more
dynamic. On the other hand, Angular JS is a JavaScript-based framework that extends HTML
with new features. It is mainly designed to develop dynamic and single-page web
applications (SPAs). In this article, we are going to discuss the difference between
JavaScript and Angular JS. But before discussing the differences, we will know about
JavaScript and Angular JS.
What is JavaScript?

JavaScript is a lightweight, object-oriented scripting language that is used to build dynamic

HTML pages with interactive effects on a webpage. JavaScript is also commonly used in
game development and mobile app development. It is an interpreted scripting language, and
its code is only executed in a web browser. We may use Node.js to run the code outside the
browser. It's also known as a browser's language. It can be used for both client-side and
server-side development. Brendan Eich of Netscape created it, and it was first published
in 1995. The language was originally known as LiveScript before being renamed JavaScript.
JavaScript's syntax is heavily influenced by the programming language C. The extension of
JavaScript filename is .js.

JavaScript Features

There are various features of JavaScript. Some of them are as follows:

o JavaScript was originally designed for DOM manipulation. Earlier, most websites
were static, but with JS, an interactive Web site can be developed.
o Functions are objects in JavaScript. They may have the same properties and methods
as other objects and passed as arguments to other functions.
o JavaScript doesn't need a compiler.

o JavaScript may handle date and time.

What is Angular Js?

It is an open-source and front-end web development framework with great features or

support. Google's Angular team first launched it in 2010. It is a framework that is
continually developing and expanding to include better methods for creating web
applications. It develops applications primarily using the model view controller
(MVC) concept and supports both data binding features and dependency injection.

Since AngularJS is mainly based on HTML and JavaScript, there is no need to learn another
syntax or language. It transforms static HTML into dynamic HTML. It extends HTML's
capabilities by adding built-in attributes and components and creating custom attributes using
simple JavaScript.

Angular JS features

There are various features of angular JS. Some of them are as follows:

o Time-saving: AngularJS allows us to work with modules that help us to reuse them,
saving time and code.
o Easy to work: It is easy to work with Angular JS because it uses JavaScript, HTML,
and CSS languages.
o Ready to use a template: AngularJS is mostly plain HTML, and it mostly uses the
plain HTML template, which it passes to the DOM and then to the AngularJS
compiler. It passes through the templates, and then they're ready to use.

Main differences between the JavaScript and Angular JS

There are various main differences between JavaScript and Angular JS. Some of them are as
follows:

o JavaScript is both a server-side and client-side scripting language for building web
applications. On the other hand, AngularJS makes web applications quick and
straightforward from the start.
o JavaScript takes less time to patch bugs and defects on a wide scale. As compared to
JavaScript, AngularJS needs more time to do the same thing.
o JavaScript is one of the most effective web development techniques used for creating
web applications. On the other hand, AngularJS has mostly been used as a JS
framework for developing web applications.
 o JavaScript is a programming language that is used to manipulate
the DOM (Document Object Model). On the other hand, AngularJS extends its
capabilities with different technologies.
o JavaScript doesn't support dependency injection. Whereas AngularJS supports both
data binding and dependency injection.
o JavaScript code is quick and fast. On the other hand, Angular JS application generally
becomes slow.
o JavaScript has been using the same strategy for several years. On the other hand,
AngularJS has been enhanced to typescript, making the applications lighter and more
interactive.
o JavaScript has an extensive user interface that includes sliders and other features. On
the other hand, AngularJS is a data-driven framework that's used to create web
applications.
o JavaScript is a powerful and complex programming language. On the other hand,
AngularJS is a simple and effective framework.

Head-to-Head comparison between JavaScript and Angular JS

Here, we are going to discuss a head-to-head comparison between JavaScript and Angular JS:

Features JavaScript Angular JS

Definition It is an object-oriented scripted It an open-source framework used to
language that is used to develop develop dynamic web and large
mobile and dynamic web single-page web applications.
applications.
Developed Netscape Communications Google mainly developed it in 2010.
developed it in 1995.
Syntax Its syntax is much complex than Its syntax is simple and easy.
Angular JS.
Programmed Its interpreters are written in the C It is written in the JavaScript
and C++ languages. language.
Filters It doesn't support the filters. It does support filters.
Learnability It isn't very easy to learn. It is easy to learn if anyone knows
the basic knowledge of JavaScript.
Concept It is based on the dynamic typing Angular JS is based on the concept
concept. of the model view controller to build
 the applications.
Dependency It doesn't support the dependency It supports both data binding and
injection injection. dependency injection.

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.

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.

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.

Introduction to components and templates

A component controls a patch of screen called a view. For example, individual components
define and control each of the following views from the Tour of Heroes tutorial:

 The application root with the navigation links.

 The list of heroes.
 The hero editor.

You define a component's application logic—what it does to support the view—inside a

class. The class interacts with the view through an API of properties and methods.

For example, HeroListComponent has a heroes property that holds an array of heroes.
Its selectHero() method sets a selectedHero property when the user clicks to choose a hero
from that list. The component acquires the heroes from a service, which is a
TypeScript parameter property on the constructor. The service is provided to the component
through the dependency injection system.

src/app/hero-list.component.ts (class)

content_copyexport class HeroListComponent implements OnInit {

heroes: Hero[] = [];

selectedHero: Hero | undefined;

constructor(private service: HeroService) { }

 ngOnInit() {

this.heroes = this.service.getHeroes();

selectHero(hero: Hero) { this.selectedHero = hero; }

Angular creates, updates, and destroys components as the user moves through the application.
Your application can take action at each moment in this lifecycle through optional lifecycle
hooks, like ngOnInit().

Component metadata

The @Component decorator identifies the class immediately below it as a component class,
and specifies its metadata. In the example code below, you can see
that HeroListComponent is just a class, with no special Angular notation or syntax at all. It's
not a component until you mark it as one with the @Component decorator.

The metadata for a component tells Angular where to get the major building blocks that it
needs to create and present the component and its view. In particular, it associates
a template with the component, either directly with inline code, or by reference. Together, the
component and its template describe a view.

In addition to containing or pointing to the template, the @Component metadata configures,

for example, how the component can be referenced in HTML and what services it requires.

Here's an example of basic metadata for HeroListComponent.

src/app/hero-list.component.ts (metadata)

content_copy@Component({

selector: 'app-hero-list',

templateUrl: './hero-list.component.html',

providers: [ HeroService ]

})
 export class HeroListComponent implements OnInit {

/* . . . */

This example shows some of the most useful @Component configuration options:

 selector: A CSS selector that tells Angular to create and insert an instance of this
component wherever it finds the corresponding tag in template HTML. For example,
if an application's HTML contains <app-hero-list></app-hero-list>, then Angular
inserts an instance of the HeroListComponent view between those tags.
 templateUrl: The module-relative address of this component's HTML template.
Alternatively, you can provide the HTML template inline, as the value of
the template property. This template defines the component's host view.
 providers: An array of providers for services that the component requires. In the
example, this tells Angular how to provide the HeroService instance that the
component's constructor uses to get the list of heroes to display.

Templates and views

You define a component's view with its companion template. A template is a form of HTML
that tells Angular how to render the component.

Views are typically arranged hierarchically, allowing you to modify or show and hide entire
UI sections or pages as a unit. The template immediately associated with a component
defines that component's host view. The component can also define a view hierarchy, which
contains embedded views, hosted by other components.
A view hierarchy can include views from components in the same NgModule, but it also can
(and often does) include views from components that are defined in different NgModules.

Template syntax

A template looks like regular HTML, except that it also contains Angular template syntax,
which alters the HTML based on your application's logic and the state of application and
DOM data. Your template can use data binding to coordinate the application and DOM
data, pipes to transform data before it is displayed, and directives to apply application logic to
what gets displayed.

For example, here is a template for the Tutorial's HeroListComponent.

src/app/hero-list.component.html

content_copy<h2>Hero List</h2>

<p><i>Select a hero from the list to see details.</i></p>

<ul>

<li *ngFor="let hero of heroes" (click)="selectHero(hero)">

{{hero.name}}

</li>

</ul>
 <app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

This template uses typical HTML elements like <h2> and <p>, and also includes Angular
template-syntax elements, *ngFor, {{hero.name}}, (click), [hero], and <app-hero-detail>.
The template-syntax elements tell Angular how to render the HTML to the screen, using
program logic and data.

 The *ngFor directive tells Angular to iterate over a list.

 {{hero.name}}, (click), and [hero] bind program data to and from the DOM,
responding to user input. See more about data binding below.
 The <app-hero-detail> tag in the example is an element that represents a new
component, HeroDetailComponent. HeroDetailComponent (code not shown) defines
the hero-detail child view of HeroListComponent. Notice how custom components
like this mix seamlessly with native HTML in the same layouts.

Data binding

Without a framework, you would be responsible for pushing data values into the HTML
controls and turning user responses into actions and value updates. Writing such push and
pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced front-
end JavaScript programmer can attest.

Angular supports two-way data binding, a mechanism for coordinating the parts of a template
with the parts of a component. Add binding markup to the template HTML to tell Angular
how to connect both sides.

The following diagram shows the four forms of data binding markup. Each form has a
direction: to the DOM, from the DOM, or both.

This example from the HeroListComponent template uses three of these forms.
src/app/hero-list.component.html (binding)

content_copy<li>{{hero.name}}</li>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

<li (click)="selectHero(hero)"></li>

 The {{hero.name}} interpolation displays the component's hero.name property value

within the <li> element.
 The [hero] property binding passes the value of selectedHero from the
parent HeroListComponent to the hero property of the child HeroDetailComponent.
 The (click) event binding calls the component's selectHero method when the user
clicks a hero's name.

Two-way data binding (used mainly in template-driven forms) combines property and event
binding in a single notation. Here's an example from the HeroDetailComponent template that
uses two-way data binding with the ngModel directive.

src/app/hero-detail.component.html (ngModel)

content_copy<input type="text" id="hero-name" [(ngModel)]="hero.name">

In two-way binding, a data property value flows to the input box from the component as with
property binding. The user's changes also flow back to the component, resetting the property
to the latest value, as with event binding.

Angular processes all data bindings once for each JavaScript event cycle, from the root of the
application component tree through all child components.
Data binding plays an important role in communication between a template and its
component, and is also important for communication between parent and child components.

Pipes

Angular pipes let you declare display-value transformations in your template HTML. A class
with the @Pipe decorator defines a function that transforms input values to output values for
display in a view.

Angular defines various pipes, such as the date pipe and currency pipe; for a complete list,
see the Pipes API list. You can also define new pipes.

To specify a value transformation in an HTML template, use the pipe operator (|).

{{interpolated_value | pipe_name}}

You can chain pipes, sending the output of one pipe function to be transformed by another
pipe function. A pipe can also take arguments that control how it performs its transformation.
For example, you can pass the desired format to the date pipe.

content_copy<!-- Default format: output 'Jun 15, 2015'-->

<p>Today is {{today | date}}</p>

<!-- fullDate format: output 'Monday, June 15, 2015'-->

<p>The date is {{today | date:'fullDate'}}</p>

<!-- shortTime format: output '9:43 AM'-->

<p>The time is {{today | date:'shortTime'}}</p>

Directives

Angular templates are dynamic. When Angular renders them, it transforms the DOM
according to the instructions given by directives. A directive is a class with
a @Directive() decorator.

A component is technically a directive. However, components are so distinctive and central

to Angular applications that Angular defines the @Component() decorator, which extends
the @Directive() decorator with template-oriented features.

In addition to components, there are two other kinds of directives: structural and attribute.
Angular defines a number of directives of both kinds, and you can define your own using
the @Directive() decorator.

Just as for components, the metadata for a directive associates the decorated class with
a selector element that you use to insert it into HTML. In templates, directives typically
appear within an element tag as attributes, either by name or as the target of an assignment or
a binding.

Structural directives

Structural directives alter layout by adding, removing, and replacing elements in the DOM.
The example template uses two built-in structural directives to add application logic to how
the view is rendered.

src/app/hero-list.component.html (structural)

content_copy<li *ngFor="let hero of heroes"></li>

<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

 *ngFor is an iterative; it tells Angular to stamp out one <li> per hero in the heroes list.
 *ngIf is a conditional; it includes the HeroDetail component only if a selected hero
exists.

Attribute directives
Attribute directives alter the appearance or behavior of an existing element. In templates they
look like regular HTML attributes, hence the name.

The ngModel directive, which implements two-way data binding, is an example of an

attribute directive. ngModel modifies the behavior of an existing element (typically <input>)
by setting its display value property and responding to change events.

src/app/hero-detail.component.html (ngModel)

content_copy<input type="text" id="hero-name" [(ngModel)]="hero.name">

Angular has more pre-defined directives that either alter the layout structure (for
example, ngSwitch) or modify aspects of DOM elements and components (for
example, ngStyle and ngClass).