FRONTEND DEVELOPMENT

( WITH ANGULAR )
Introduction
And Installation of
Angular, Typescript

LEARN. DO. EARN2

Topics
Topics covered in this module:

1. Introduction to Angular
2. Creating a New Project.
3. Typescript and Installation of Typescript.
4. Compilation.
5. Data Types.
6. Variable Declaration.
7. Interview Questions.

Introduction to Angular 3
 Send mail to
[email protected]
For Installation & Other Related Issues

Introduction to Angular 4
 Set Up Your Environment
1. Click here for detailed step by step Installation Guide

2. Click Here for step by step TypeScript Installation

3. Click here to watch Video

Introduction to Angular 5
Introduction to Angular

What is Angular?

• Angular is a JavaScript Framework which is used to create SPA application.

Introduction to Angular 6
 Introduction to Angular (Contd.)
● Angular is a complete overhaul of Angular JS framework with a major core
architectural changes to solve the problems of Angular JS and align itself to the
latest technology standards like web components.

● Angular embraces unidirectional data-flow.

● It supports ES6 at its core with Typescript.

● Mobile First has been one of the core thoughts behind the framework.

● Speed and Performance has been given special focus using the new change detection
system and Zone.

● Hierarchical Dependency Injection system.

● New directives and components with improved lifecycle hooks.

Introduction to Angular 7
Introduction to Angular (Contd.)

Services

ES5 & ES6 Routing

Material
Directives
Design

Server side
Angular2
Angular
RxJS

Dependency
Annotations
Injection

Types Promises

Introduction to Angular 8
Introduction to Angular (Contd.)
Angular Architecture

Introduction to Angular 9
Introduction to Angular (Contd.)
Technologies supported by Angular:

Introduction to Angular 10
 Creating New Project

• Creating a New Project through Angular CLI or Angular GitHub Repository.

• Open your project in Visual Studio Code IDE.
• Navigate to src/app. Open app.component.ts and type HTML code in template in
@Component.

Component({
selector: 'app-root',
template: `<input type='text'
placeholder= "Enter first name"
[(ngModel)] = "firstName">
<input type='text'
placeholder= "Enter last name"
[(ngModel)] = "lastName">
<br>Hello {{firstName}} {{lastName}}` ,
styleUrls: ['./app.component.css']
})

Introduction to Angular 11
Creating New Project (Contd.)

In app.component.ts type below code in AppComponent class. Navigate to

http://localhost:4200/

export class AppComponent {

firstName: string;
lastName: string;
}

Introduction to Angular 12
Creating New Project (Contd.)

• In text box type “ MS ” in Firstname and “ Dhoni ” in Lastname . You will be able to
see “MS Dhoni ” next to Hello.

• Awesome!! You have created your First Angular App.

Introduction to Angular 13
 Understanding The Project Structure

1. Click here for detailed guide for project structure Folder Structure
Typescript and Installation of Typescript

What is Typescript?

• Typescript is a strict superset of JavaScript and adds optional static typing and class
based object-oriented programming to the language.

Introduction to Angular 15
Typescript and Installation of Typescript (Contd.)

Installation Typescript
• To install Typescript run the below command in CMD. The –g flag is use for
installing Typescript globally.

npm install -g typescript

Introduction to Angular 16
Compilation
• Typescript compiles .ts file to .js
• It compiles file using a Typescript compiler that gets installed while installing
Typescript.
• Compilation can be performed as shown in the image.
• tsc is the Transcript compiler command accessible from command prompt which
compiles the .ts files provided.
• --target ES5 or --t ES5 flag is use for targeting ECMA Script version.

// Single File
tsc –target ES5 filename.ts

// Multile file
Tsc –target ES5 file1.ts file2.ts, file 3.ts

Introduction to Angular 17
Data Types

• A datatype is used to give classification to the data and to tell the compiler or
the interpreter how the programmer intends to use the data.

Introduction to Angular 18
Data Types (Contd.)
Data types provided by Typescript are:

• Boolean
• Number
• String
• Array
• Any
• Tuple
• Enum
• Void

Introduction to Angular 19
Data Types (Contd.)

Syntax for declaring variable.

• let <variableName> : <datatype> = <value>
• const <variableName> : <datatype> = <value>

Introduction to Angular 20
Data Types (Contd.)

Boolean

• A boolean value is use to define the most basic datatype true or false value.

let truthy : boolean = false;

Introduction to Angular 21
Data Types (Contd.)

Number
• All the numbers in Typescript are floating point values.
• These floating point numbers get the type number.
• Typescript also supports binary and octal literals which were introduced in ES6
(ECMAScript 2015) besides hexadecimal and decimal literals

let index : number = 0;

let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

Introduction to Angular 22
Data Types (Contd.)

String

- We use string datatype to let the compiler or interpreter know that it is a

string.

- Double ( “ ) and single quote ( ‘ ) are used to surround a string.

let firstName: string = "Sachin";

let lastName: string = 'Tendulakar';

Introduction to Angular 23
Data Types (Contd.)

• To span multiple lines in Typescript we can use backtick/ backquote ( ` ) and

have embedded expressions with “ ${ expr }”.

let firstName: string = "Sachin";

let lastName: string = 'Tendulakar';
let game: string = "Cricket"

let description : string = ` Hello

My name is ${firstName} ${lastName}.
People call me GOD of ${game}.`

Introduction to Angular 24
Data Types (Contd.)
Array

We can define array datatype in two ways:

• The type of the elements followed by [ ] to denote an array of that

element type.

• Generic array type – Array <elementType>.

let color: string [ ] = ["Red", "Blue", "Green"];

let countries : Array<string> = ["India", "Australia", "New Zealand"];

Introduction to Angular 25
Data Types (Contd.)
Any
• Sometimes we may get values from dynamic sources like 3rd party libraries or
API and we might be unaware of the datatype for that particular value. In such
cases, we leave type-checking and let the values pass through the compile-
time checks.
• The ‘any’ datatype is use to achieve the same.

let playerList : any[ ] = ["Sachin", 100 , "Shewag", "Dhoni"];

playerList[1] = "Gambhir";

Introduction to Angular 26
Data Types (Contd.)
Enum

• Sets of numeric values can be given friendly names with the help of Enum.

• We use enum keyword to declare enum.

enum favBikes { "Pulsar" , "Splender", "KTM", "Honda"};

let bike : favBikes = favBikes.Pulsar;

Introduction to Angular 27
Data Types (Contd.)

• Enum members starts numbering from 0 by default.

• This can be changed manually by setting the value of one of its members. For
example, we can start the previous example at 1 instead of 0.

enum favBikes { "Pulsar" = 1 , "Splender", "KTM", "Honda"};

let bike : favBikes = favBikes.Pulsar;

Introduction to Angular 28
Data Types (Contd.)

Void
• Some functions perform the logic and do not return any value, in that case we
can declare the return type as void.

• “void” is contrary to any other datatype. It is the absence of having any return
type at all.

function getFavbike( ) : void {

console.log( bike );
}

Introduction to Angular 29
 Data Types (Contd.)

Type Assertions.
• In some instances, we are more assured about the data type of an entity than
Typescript.
• Type assertions are used to apply data type changes to an entity without special
checking or restructing of data. This is comparable to type casting in other languages.
• Type assertion does not have any impact on runtime and is performed by the compiler.
• Type assertions can be done by using two kinds of syntax:
 “angle-bracket” syntax
 “as” syntax

Introduction to Angular 30
Data Types (Contd.)

let description : any = ` Hello

My name is ${firstName} ${lastName}.
People call me GOD of ${game}.`
let strLength: number = (<string>description).length;

let description : any = ` Hello

My name is ${firstName} ${lastName}.
People call me GOD of ${game}.`
let strLength: number = ( description as string ).length;

Introduction to Angular 31
Variable Declaration
The types of variable declaration which Typescript provides with some improvements:

• var

• let

• const

• declare

Introduction to Angular 32
 Variable Declaration (Contd.)
Let
• We can use let keyword for declaring the variable like var keyword in JavaScript.
• The variable declared with let keyword have their scope in the enclosing block,
whereas the variable declared with var keyword have their scope in the enclosing
function.
• let uses lexical scoping or block-scoping.
• let keyword can be used after it is declared.

function checkLet(favBikes) {

if (favBikes === "Pulsar") {

let result = "Awesome"
} // Error :Block-scoped variable 'tempData'
// Error: 'result' doesn't exist here // used before its declaration.
return result; tempData = 1
} let tempData;

Introduction to Angular 33
 Variable Declaration (Contd.)
Const
• Const keyword stands for constant.
• Sometimes we don’t want some variable to change the value once it is declared in
the entire life time of the program.
• Once the const variable is declared it cannot be changed.
• When declaring const variable we have to initialize it.

const score: number = 100;

//Cannot assign to 'score' because it is a constant
// or a read-only property
score = 200;

Introduction to Angular 34
 Variable Declaration (Contd.)
Declare
• Sometimes we have to use third party libraries in our project like JQuery,
Angular, Altertify etc.
• To make typescript compiler aware of the 3rd party libraries object we use
declare keyword in the global namespace of the project.

declare let library : any;

Introduction to Angular 35
 Assignment Submission : Useful References

• Submit Assignment Through Visual Studio Code –

• https://s3.amazonaws.com/acadgildsite/course/frontend/reference/GitWithVSCode.pdf

• Assignment Validation Metrics –

• https://acadgild.freshdesk.com/solution/articles/24000000724-assignment-validation-metrics

Introduction to Angular 36
 Interview Questions

Interview Questions:

1. How Speed and Performance has been given special focus in Angular ?

2. What is the use of npm install and the flag –g ?

3. What is Angular CLI and what is the benefit of using it ?

4. In how many types we can create Angular Project ? Which one your prefer and why ?

5. What is typescript and what is the difference between Typescript and JavaScript ?

Introduction to Angular 37
THANK YOU
Support - +91 9000000000
Email us at - [email protected]

LEARN. DO. EARN

38