Angular Theory Notes

Chapter 1: Angular Introduction

Angular Overview

Angular 8 is a TypeScript based full-stack web framework for building web and mobile

applications. One of the major advantages is that the Angular 8 support for web application

that can fit in any screen resolution. Angular application is fully compatible for mobiles,

tablets, laptops or desktops. Angular 8 has an excellent user interface library for web

developers which contains reusable UI components. This functionality helps us to create

Single Page Applications (SPA). SPA is reactive and fast application. For example, if you have

a button in single page and click on the button then the action performs dynamically in the

current page without loading the new page from the server. Angular 8 is Typescript based

object-oriented programming and support features for server-side programming as well.

Comparison of Angular Versions

As we know already, Google releases the version of Angular for the improvement of mobile

and web development capabilities. All the released versions are backward compatible and

can be updated easily to the newer version. Let’s go through the comparison of released

versions.

AngularJS - Angular is very powerful JavaScript framework. It was released in October 2010.

AngularJS based on Model View Controller (MVC) architecture and automatically handles

JavaScript code suitable for each browser.

Angular 2.0 -

 Angular 2.0 was released in September 2016. It is re-engineered and rewritten

version of AngularJS. Angular had a focus on controllers but, version 2 has changed

focus on components. Components are the main building block of application.

 It supports features for speed in rendering, updating pages and building cross-

platform native mobile apps for Google Android and iOS.

4.0 Angular - 4.0 was released in March 2017. It is updated to TypeScript 2.2, supports ng

ifelse conditions whereas Angular 2 supported only if conditions. Angular 4.0 introduces

animation packages, Http search parameters and finally angular 4 applications are smaller

and faster.

Angular 5.0 - was released in November 2017. It supported some of the salient features

such as HTTP Client API, Lambda support, Improved Compiler and build optimizer.

Angular 6.0 - Angular 6.0 was released in May 2018. Features added to this version are

updated Angular CLI, updated CDK, updated Angular Material, multiple validators and usage

of reactive JS library.

Angular 7.0 - Angular 7.0 was released in October 2018. Some of salient features are

Google supported community, POJO based development, modular structure, declarative

user interface and modular structure.

Angular 8 New features Angular 8 comes up with the

following new attractive features:

 Bazel support - If your application uses several modules and libraries, Bazel concurrent

builds helps to load faster in your application.

 Lazy loading - Angular 8 splits AppRoutingModule into smaller bundles and loads the data

in the DOM.

 Differential loading - When you create an application, Angular CLI generates modules and

this will be loaded automatically then browser will render the data.

 Web worker - It is running in the background, without affecting the performance of a

page.

 Improvement of CLI workflow - Angular 8 CLI commands ng-build, ng-test and ng-run are

extended to third party libraries.

 Router Backward Compatibility - Angular router backward compatibility feature helps to

create path for larger projects so user can easily add their coding with the help of lazy

coding.

 Opt-in usage sharing - User can opt into share Angular CLI usage data.

Applications Some of the popular website using Angular

Framework are listed below:
 [Link] - It is one of the leading forecasting weather report website.

 Youtube - It is a video and sharing website hosted by Google.

 Netflix - It is a technology and media services provider.

 PayPal - It is an online payment system.

Chapter 2 : Installation

Seeting up the Development Enviornment -

This chapter explains about how to install Angular 8 on your machine. Before moving to the

installation, let’s verify the prerequisite first.

Prerequisite:

As we know already, Angular is written in TypeScript. We need Node and npm to compile

the files into JavaScript after that, we can deploy our application. For this purpose, [Link]

must be installed in your system. Hopefully, you have installed [Link] on your machine. We

can check it using the below command:

node - - version

You could see the version of node. It is show below:

v14.2.0

If Node is not installed, you can download and install by visiting the following link:
[Link]

Angular 8 installation –
Angular 8 CLI installation is based on very simple steps. It will take not more than five
minutes to install.
npm is used to install Angular 8 CLI. Once [Link] is installed, npm is also installed. If you
want verify it, type the below command:

npm -v

Let’s install Angular 8 CLI using npm as follows:

npm install -g @angular/cli@^8.0.0

To verify Angular 8 is properly installed on your machine, type the below command:
ng version

You could see the following response:

Angular CLI: 8.3.26

Build Your First Angular App –

Let us create a simple angular application and analyse the structure of the basic angular
application.
Let us check whether the Angular Framework is installed in our system and the version of
the installed Angular version using below command:
ngngversion
version

Here,

ng is the CLI application used to create, manage and run Angular Application. It written in
JavaScript and runs in NodeJS environment.
The result will show the details of the Angular version as specified below:

Angular CLI: 8.3.26 Node: 14.2.0 OS: win32 x64

Angular: ... Package Version
------------------------------------------------------ @angular-
devkit/architect 0.803.26 @angular-devkit/core 8.3.26
@angular-devkit/schematics 8.3.26
@schematics/angular 8.3.26 @schematics/update
0.803.26 rxjs 6.4.0
So, Angular is installed in our system and the version is 8.3.26
Let us create an Angular application,
Use below command to create the new application.

cd /path/to/workspace

ng new hello-World

Here,

new is one of the command of the ng CLI application. It will be used to create new
application. It will ask some basic question in order to create new application. It is enough to
let the application choose the default choices. Regarding routing question as mentioned
below, specify No. We will see how to create routing later in the Routing chapter.

Would you like to add Angular routing? No

Once the basic questions are answered, the ng CLI application create a new Angular
application under Angular folder.
Let us check the partial structure of the application.
The structure of the application is as follows:

| [Link]
| [Link]
| [Link]
| [Link]
| [Link]
|
+--app
| [Link]
| [Link]
| [Link]
| [Link]
| [Link]
|
+---assets
| .gitkeep
|
+---environments
[Link]
[Link]
 Here,

We have shown, only the most important file and folder of the application.

 [Link] and assets are application’s icon and application’s root asset folder.

 [Link] contains standard code useful for browser compatibility.

 environments folder will have the application’s setting. It includes production and
development setup.

 [Link] file contains the startup code.

 [Link] is the application base HTML code.

 [Link] is the base CSS code.

 app folder contains the Angular application code,

Let us start the application using below command:

ng serve 10% building 3/3 modules 0 activei wds:

Project is running at [Link]

dev-server/

i wds: 404s will fallback to //[Link]

chunk {main} [Link], [Link] (main) 49.2 kB [initial]
[rendered] chunk {polyfills} [Link], [Link] (polyfills) 269
kB [initial] [rendered]
chunk {runtime} [Link], [Link] (runtime) 6.15 kB
[entry] [rendered]
chunk {styles} [Link], [Link] (styles) 9.75 kB [initial]
[rendered] chunk {vendor} [Link], [Link] (vendor) 3.81
MB [initial] [rendered] Date: 2020-05-26T[Link].134Z - Hash:
0dec2ff62a4247d58fe2 - Time: 12330ms ** Angular Live
Development Server is listening on localhost:4200,
open your browser on [Link] *
i wdm: Compiled successfully.
Here, serve is the sub command used to compile and run the Angular application using a
local development web server. ng server will start a development web server and serves
the application under port, 4200.
Let us fire up a browser and opens [Link] The browser will show the
application as shown below:

Angular Architecture –
Angular framework is based on four core concepts and they are as follows:

 Components.

 Templates with Data binding and Directives.

 Modules.

 Services and dependency injection.

Component- the core of the Angular framework architecture is Angular Component.

Angular Component is the building block of every Angular application. Every angular application is
made up of one more Angular Component. It is basically a plain JavaScript / Typescript class along
with a HTML template and an associated name.
Let us analyse the AppComponent component.

AppComponent code is as follows:

// src/app/[Link]

import { Component } from '@angular/core';

@Component({ selector: 'app-root',

templateUrl: './[Link]',

styleUrls: ['./[Link]'] })

export class AppComponent

{ title = ‘Hello World’;

@Component is a decorator and it is used to convert a normal Typescript class to Angular

Component.

app-root is the selector / name of the component and it is specified using selector meta data of the
component’s decorator. app-root can be used by application root document, src/[Link] as
specified below:
[Link] is the HTML template document associated with the component. The
component template is specified using templateUrl meta data of the @Component decorator.

[Link] is the CSS style document associated with the component. The component style
is specified using styleUrls meta data of the @Component decorator.

Template-
Template is basically a super set of HTML. Template includes all the features of HTML and provides
additional functionality to bind the component data into the HTML and to dynamically generate
HTML DOM elements.

The core concept of the template can be categorised into two items and they are as follows:

 Data binding- Used to bind the data from the component to the template.

Syntax - {{ title }}

Here, title is a property in AppComponent and it is bind to template using Interpolation.

 Modules - Angular Module is basically a collection of related features / functionality.

Angular Module groups multiple components and services under a single context.

NgModule decorator is used to convert a plain Typescript / JavaScript class into Angular

module.

 declarations option is used to include components into the AppModule module.

 bootstrap option is used to set the root component of the AppModule module.

 providers option is used to include the services for the AppModule module.

 imports option is used to import other modules into the AppModule module.

 Services - Services are plain Typescript / JavaScript class providing a very specific

functionality. Services will do a single task and do it best. The main purpose of the service is

reusability. Instead of writing a functionality inside a component, separating it into a service

will make it useable in other component as well.

 Also, Services enables the developer to organise the business logic of the application.

Basically, component uses services to do its own job. Dependency Injection is used to

properly initialise the service in the component so that the component can access the

services as and when necessary without any setup.

Workflow of Angular application -

We have learned the core concepts of Angular application. Let us see the complete flow of a
typical Angular application

src/[Link] is the entry point of Angular application.

Note: To learn and use the Angular Framework in very easy and efficient
way we should be the brief knowledge of Typescript which we discussed in
next chapter .
Chapter 3 : Typescript Introduction –

Typescript Overview –

JavaScript was introduced as a language for the client side. The development of [Link] has

marked JavaScript as an emerging server-side technology too. However, as JavaScript code

grows, it tends to get messier, making it difficult to maintain and reuse the code. Moreover,

its failure to embrace the features of Object Orientation, strong type checking and compile-

time error checks prevents JavaScript from succeeding at the enterprise level as a full-

fledged server-side technology. TypeScript was presented to bridge this gap.

What is TypeScript?
By definition, “TypeScript is JavaScript for application-scale development.”

TypeScript is a strongly typed, object oriented, compiled language. It was designed by

Anders Hejlsberg (designer of C#) at Microsoft. TypeScript is both a language and a set of
tools.

TypeScript is a typed superset of JavaScript compiled to JavaScript.

In other words, TypeScript is JavaScript plus some additional features.

Features of TypeScript-

TypeScript is just JavaScript. TypeScript starts with JavaScript and ends with JavaScript.

Typescript adopts the basic building blocks of your program from JavaScript. Hence, you

only need to know JavaScript to use TypeScript. All TypeScript code is converted into its

JavaScript equivalent for the purpose of execution.

TypeScript supports other JS libraries. Compiled TypeScript can be consumed from any

JavaScript code. TypeScript-generated JavaScript can reuse all of the existing JavaScript

frameworks, tools, and libraries.

JavaScript is TypeScript. This means that any valid .js file can be renamed to .ts and

compiled with other TypeScript files.

TypeScript is portable. TypeScript is portable across browsers, devices, and operating

systems. It can run on any environment that JavaScript runs on. Unlike its counterparts,

TypeScript doesn’t need a dedicated VM or a specific runtime environment to execute.

TypeScript and ECMAScript

The ECMAScript specification is a standardized specification of a scripting language. There are six
editions of ECMA-262 published. Version 6 of the standard is codenamed "Harmony". TypeScript is
aligned with the ECMAScript6 specification.

Key Difference Between Typescript and JavaScript

Setting up the Environment to write Typescript

 Typescript is an Open Source technology. It can run on any browser, any host, and
any OS. You will need the following tools to write and test a Typescript program:
 Visual Studio Code
The source files are typically named with the extension .ts
 The TypeScript Compiler The TypeScript compiler is itself a .ts file compiled
down to JavaScript (.js) file. The TSC (TypeScript Compiler) is a source -to-
source compiler (transcompiler / transpiler).

 Install [Link]
 Install Npm
Variable in Typescript

In TypeScript, variables are used to store data values, and they come in various types and

forms. TypeScript is a statically typed superset of JavaScript, which means that you can

declare variable types explicitly.

Variable scopes in TypeScript:

Local Scope: As the name specified, are declared within the block like methods, loops etc.

Local variables are accessible only within the construct where they are declared.

Global Scope: If the variable is declared outside the construct then we can access the

variable anywhere. This is known as Global Scope.

Class Scope: If a variable is declared inside the class then we can access that variable

within the class only.

Here are the different ways to declare variables in TypeScript:

var: The var keyword is the most common way to declare variables. However, it has

some issues, like hoisting and scope problems, and it's generally not recommended for

modern TypeScript development.

Syntax: var x=10;

let: The let keyword is used to declare variables with block-level scope. It's the preferred

way to declare variables in modern JavaScript and TypeScript.

Syntax : let y :string =”Hello World”;

Const keyword: Declaring a variable using the const keyword.

Syntax : const A : number = 9;

The const variables are block scoped. Constants, like variables declared with the let

keyword, are block-scoped. A constant’s value cannot be modified by reassigning a new

value to it and the variable with the same name cannot be redeclared either.

Typescript Data Types - Whenever a variable is created, the intention is to

assign some value to that variable but what type of value can be assigned to that variable is

dependent upon the datatype of that Variable.

In typeScript, type System represents different types of datatypes which are supported by

TypeScript.

number: Represents numeric values, including integers and floating-point

numbers.

Syntax - let age : number=16;

string: Represents text or character data enclosed in single or double quotes

Syntax: let name: string “Hello Siddesh”;

boolean: Represents true or false values.

Syntax: let isStudent : Boolean= true;

any: Represents a variable for which the type is not known at compile time.
Avoid using any when possible, as it weakens type checking.
Syntax: -
let data: any = "This can be anything";

array : Represents a list of values of a particular type.

Syntax: - let numbers: number[] = [1, 2, 3, 4, 5];

tuple: Represents an array with a fixed number of elements, where each element may have
a different type.

Syntax: - let person: [string, number] = ["Alice", 30];

Enum : Represents a set of named constant values.
Syntax :- enum Color {
Red,
Green,
Blue
}
let selectedColor: Color = [Link];
Void : Represents the absence of a value or the return type of a function that doesn’t
return any value.
Syntax: function logMessage(): void { [Link](“This function doesn’t return anything”);
}

Null and Undefined: Represents values that are explicitly empty or uninitialized respectively
.
Syntax: let emptyValue: null=null;
Let unitializedValue: undefined=undefined;
Chapter 4 : Typescript Operators –
TypeScript supports a wide range of operators, just like JavaScript, for performing various
operations on values and variables. Here are some of the most commonly used operators in
TypeScript:

Commonly used TypeScript operators list:

• Arithmetic Operators
• Comparison Operators
• Bitwise Operators
• Logical Operators
• Assignment Operators
• Conditional Operator
• String Operator