####### Introduction to Angular ######

##Angular (ng) High-level info (Angular 7)

Angular 2+ (‘Angular’) is a Typescript-based opensource front-end web application platform (originally from Google)

TypeScript (.ts) => String Typing, Decorators (Annotations)

--> ES6 (ECMAScript) => Classes, Modules, Arrow Functions

TypeScript Compiler generates Java Script (human-readable) --> Compile in to ES5 or ES6

SPA - Single Page Application

- AJAX & HTML5 - HTML Fragments (mini--views)

Clean separation of code that renders UI & the code that does the application Logic

Dependency Ingection - loose coupling b/w components and services

Automatic change detection (UI gets reflected automatically)

Comes with Rx.js - subscriptionbased processing of asynchronous data - eliminated callback hell

Angular CLI - The scaffolding and deployment tool - spares developers from writing the boilerplate code and configuration scripts.

##Responsive Web Design (RWD)

- Web desgin approach - optimal viewing experiance on wide range of devices

- Responsive theme's layout adjusts to your devices screen size

##WorkSpace Setup

Node-v10.x https://nodejs.org/en/download/

Visual Studio Code

Angular CLI - npm install -g @angular/cli

##First Project (ng way)

#1 Open Terminal window --> go to your folder where you want to create the project

--> ng new <<your-project-name-here>>

#2 Launch the Angular application by running the command

--> ng serve --o

#3 Launches the index.html in a browser @ http://localhost:4200 (port might vary)

##Deployment and other info - https://angular.io/guide/deployment

##Build and Deploy as a JS

Ng serve

• In-memory compilation running on local server

• File changes trigger reload for iterative development

Ng build

• Creates output folder ‘dist’

• Consolidates app into a few js files

• Assets folder replicated

• Must change base href for deployment environment

##First Project (npm way)

Go to desired folder in Terminal and run --> npm init -y

look at files, especially package.json

Add dependencies – Angular, SystemJS, Live-server, TypeScript compiler

Run the install command to install the above dependencies --> npm install

Copy the following files

- SystemJS Config file, index.html, main.ts, app.module.ts and app.component.ts

Launch the Angular application by running the command

Launch the index.html in a browser @ http://localhost:4200/index.html (port might vary)

## Angular Project Structure

#Angular.json

"outputPath" is the location where the ng build command places the condensed js files for the entire app

index.html is the single page in which the Angular App is injected

main.ts is the “main” Angular entry point

polyfills.ts contains browser compatibility polyfills and application polyfills.

styles.css is where global styles can be placed. Any CSS rules you place here are injected into the DOM in a <style></style> tag

"assets" array describes the location of static file assets

#Index.html

#main.ts --> calls bootstrap function

#app.module.ts --> being bootstrapped - to app component

#app.component.ts --> @Component decorator

#app.component.html -->

################ Basic Concepts and Binding ##########

# Great size for your reference - https://basarat.gitbook.io/typescript/future-javascript/let

• TS / JS Primer

• Types

• Shapes

• Spread and Rest Operators

• Classes and Interfaces

• Decorators

• Arrow Functions

The Data Binding process in Angular 7

• Interpolation

• Property

• Event

• Two-Way

## Types (Strict Type checking)

function add (a:number, b:number){

return a+b;

}

add(‘5’,6);//Compilation error

add(1, 3);//works

#Types: Boolean, number, string, arrays [], object literals{}, undefined, null, enum, any and void

let hostname: string = "Sree";

let list: number[] = [1,2,3];

enum Color {Red, Blue, Green, Black};

let c: Color = Color.Black;

#Types inferred if no type is given

let a = 123;

## Spread Operators (spreading array into positional arguments)

var list = [1, 2, 3];

list = [...list, 4, 5, 6];

console.log(list); // [1,2,3,4,5,6]

## Destructiring

var [x, y, ...remaining] = [1, 2, 3, 4];

console.log(x, y, remaining); // 1,2,[3,4]

## Rest Operators (like varargs in java) - accept multiple arguments in your function and get them as an array.

function fnTakeItAll(first, second, ...allOthers) {

console.log(allOthers);

}

fnTakeItAll('cat', 'mat'); // []

fnTakeItAll('cat', 'mat', 'bat', 'fat'); // ['bat','fat']

## var vs let

#var - Variables in JavaScript are function scoped

var foo = 123;

if (true) {

var foo = 456;

}

console.log(foo); // 456

#let - variables with true block scope

let foo = 123;

if (true) {

let foo = 456;

}

console.log(foo); // 123

## Union of types (can be al alternative to Inheritance)

export enum Color {RED = ‘red’, BLUE = ‘blue’, WHITE = ‘white’}

we could use union types and get similar benefits in a much shorter fashion:

export type Color = 'red' | 'white' | 'blue';

export type Optional<T> = T | undefined;

let user: Optional<User>;

export type AuthAction = LoginAction

| LoginSuccessfulAction

| LoginErrorAction

| LogoutAction

| LogoutSuccesfulAction;

type Age = number | string;

let numAge: Age = 50;

let strAge: ge = "Fifty";

function printAge(age: Age ): string{

return "Is your age, ${age} ?"

}

## Classes & Interfaces

#Interfaces - are contracts - cant instantiate

interface Person {

firstName: string;

lastName: string;

}

# Classes - can be instantiated by TS

class Employee implements Person{

firstName: string;

lastName: string;

}

## Shapes

Any two JavaScript objects (despite from different classes) are considered equivalent,

if they are composed of same type of attributes

## Decorators

https://www.typescriptlang.org/docs/handbook/decorators.html

https://www.youtube.com/watch?v=3Rgv2UWK2Bo

Decorators are functions which will return functions, will/can have metadata

Auxiliary functions that can be hosted by Classes, Methods, Properties, Parameters, or Accessors

##Types of Decorators##

Class Decorators: @NgModule, @Component

Property decorators: @Input, @Output

Method decorators: @HostListener (event decorator)

Parameter decorators: @Inject

Any function can be used as a decorator

** Decorator - executed at the time of class evaluation (not instantiation) **

function myDecorator(prefix?: string){

return (constructor:any) => {

console.log(constructor);

console.log("decorator evaluated");

constructor.prototype.message = prefix + constructor.name;

}

@myDecorator("Hello ")

class World{

message: string;

}

let w = new World();

console.log("Class Decorator ");

console.log(w.message);

console.log("-------------");

#Decorator Factory - We can write a decorator factory in the following fashion:

function color(value: string) {

// this is the decorator factory

return function (target) {

// this is the decorator

// do something with 'target' and 'value'...

};

}

## Data Binding - Data binding signifies how and what kind of data is bound between a component and its template.

#1# Interpolation – binds component properties in output template. It uses {{}}.

Syntax : {{inrerpolation}} means --> {{valueTo bind}}

<span>{{title}} App is running !!! </span>

#2# Property Binding – flows data from the component to the element. Uses []

<span [style.color]="componentStyle"> Some colored test!!</span>

#3# Event Binding – flows data from an element to the component. Uses ()

<button (click)="alertTheWorld()">Click Me</button>

#4# Two-Way Binding – is a combination of the Event and Property Bindings.

Used along with the ngModel object.

*Must Import FormsModule

        <input [(ngModel)]="dynamicValue"
             placeholder="Watch the text update !"
             type="text">
         <span>{{dynamicValue}}</spn>

## Component

Components form the building blocks of an Angular application.

To create a Component, issue the following command

ng g component <component name>

#Practice

1. Make Developer Class (ng g class Developer)

1. firstName: string

2. lastName: string

3. favoriteLanguage: string

4. yearStarted: number

2. Make new component called ‘bio’ (ng g component bio)

1. Import Developer Class

2. Create instance of a developer inside of the constructor

assign to a property called ‘dev’

3. Display dev component in bio.component.html

4. Add <app-bio></app-bio> to app.component.html

5. Create toggle switch using ngIF to only display bio component

if link is clicked

Use the "selector" value of the new component in the app.component.html to import it there

## Component Lifecycle

• The lifecycle of a component is managed by Angular itself.

• It manages creation, rendering, binding data-bound properties etc. and also

offers the feature “hooks” that allows responding to key lifecycle events.

• Here is the complete lifecycle hook interface inventory:

• ngOnChanges - called when an input binding value changes.

• ngOnInit - called after the first ngOnChanges.

• ngDoCheck - called after every run of change detection.

• ngAfterContentInit - called after the component content is initialized.

• ngAfterContentChecked - called after every check of component content.

• ngAfterViewInit - called after the component's view(s) are initialized.

• ngAfterViewChecked - called after every check of a component's view(s).

• ngOnDestroy - called just before the component is destroyed.

## Elvis Operator:

• If a property, that does not exist, is referenced in a template, an

exception is thrown.

• The “Elvis Operator” is a simple and easy way to guard against null and

undefined properties.

• It is denoted by a question mark immediately followed by a period “?.”.

<md-input-container>

<label>Type to see the value</label>

</md-input-container>

<strong>{{input?.value}}</strong>

## Structural Directives

• ngIf adds and removes elements in the DOM based on the

results of an expression.

• ngFor is a repeater directive that outputs a list of elements by

iterating over an array.

<div *ngIf="emps">

<div *ngFor="let emp of emps">

<p><span class="bold">First Name:</span> {{emp.firstName}}</p>

<p><span class="bold">Last Name:</span> {{emp.lastName}}</p>

<p><span class="bold">Department:</span> {{emp.department}}</p>

<hr />

</div>

## Introduction to Routes

• Routing allows to:

– Recover browser history functionality which is otherwise lost with SPA

– Maintain the state of the application.

– Implement modular applications.

– Implement the application based on the roles (certain roles have access to

certain URLs).

• Routes are injected into <router-outlet></router-outlet>.

This is most commonly placed in app.component.html below any navigation bars or content

that you want to appear on every page

You can add routing after the fact

• Angular best practice is to create a separate, top-level module dedicated to routing

ng g module app-routing --flat --module=app

• - - flat flag will place the module in the top level

• - - module=app will add the import for app-routing inside of AppModule

## Route Configuration

Routes are configured, using the Routes type, which is an array of route objects.

The route object is composed of the following attributes:

– Path: URL to be shown in the browser when application is on the specific

route.

– Component: Component to be rendered to, when the application is on the

specific route. This is the output of the router link.

##app-routing.module.ts## sample

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

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { EmpComponent } from './emp/emp.component';

const routes: Routes = [

{path:'', component: HomeComponent},

{path:'bio',component:EmpComponent}];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

## redirectTo ## Routes may redirect to other routes, using the redirectTo attribute.

const routes: Routes = [

{ path='', redirectTo= 'emp', pathMatch ='full' },

{ path='emp', component:EmpComponent }];

##Route Navigation##

• In the view template, routerLink directive may be used inside of

an anchor tag to add links that point to the defined routes.

<a routerLink:"/component-one" > Component One </a>

#Programatically do it this way

import {Router} from '@angular/router';

constructor (private router: Router){}

this.router.navigate("/emp")

## BootStrap Stylesheet - industry standard style for Angular

integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

## Services in Angular ##

• Create a Service using the command:

ng g service <<ServiceName>>

• Services expose methods (supposedly business logic) as

API along with optional public properties.

• Services are dependencies injected by Angular, which

maintains each service as a singleton.

• The @Injectable decorator is used to mark a Typescript

class as a Service.

• providedIn: Determines which injectors will provide the

injectable, by either associating it with an @NgModule or

other InjectorType, or by specifying that this injectable

should be provided in the 'root' injector, which will be the

application-level injector in most apps

## Injectable Decorator

## Dependency Injection

• Import the service class

• Define it within the constructor parameters

• It should have the ‘private’ access modifier

## Route Parameters

Parameters are sent using :paramName embedded on to the router paths:

const routes: Routes = [

{ path='', redirectTo= 'product-list', pathMatch ='full' },

{ path='product-details/:id', component: ProductDetails }];

The parameter can then be sent using routerLink and interpolation:

<a routerLink="product-details/{{product.id}}"> {{product.name}} </a>

OR the routerLink directive may be used and supplied with parameters

to be automatically sent, while invoking a router link.

<a *ngFor="let product in products"

[routerLink]="['/product-details', product.id]">

</a>

## Reading Routing Parameters using ActivatedRoute ##

– Angular provides the ActivatedRoute service, which in turn supplies

a paramMap property which contains the parameters.

import {ActivatedRoute} from '@angular/router';

@Component.....

export class TestComponent implements onInit{

id;

constructor(private route: ActivatedRoute){}

ngOnInit(){

this.id = this.route.snapshot.paramMap.get('id')

}

## Navigate to parameterized routes via code

Navigating to parameterized routes internally:

– Create a Router object and use the navigate method.

– Pass an array containing the main route and the parameter

(just like routerLink directive on previous page)

@Component ....

export class TestComponent{

constructor(private router: Router){}

goToProductDetails(id){

this.router.navigate('/product-detail', id);

}

## Creating in app-routing.module.ts

## Linking

## Retrieving parameters in component class

## Child Routes

================================================

Sree's Blog

Sunday, January 17, 2021

Angular JS - notes

####### Introduction to Angular ######

##Angular (ng) High-level info (Angular 7)

################ Basic Concepts and Binding ##########

## Component

## Component Lifecycle

## Introduction to Routes

## Services in Angular ##

## Route Parameters

No comments:

Post a Comment