Learning Angular - Third Edition Section 1 note

 Learning Angular - Third Edition

1. source code 

https://github.com/PacktPublishing/Learning-Angular--Third-Edition

2. Prerequisites

Node.js: run "node -v" to check the version

NPM: run "npm -v" to check the version (Include by default in Node.js)

3. Install Angular CLI

npm install -g @angular/cli@10.0.0

run "ng version" or "ng v" to check the version

ng help

ng new my-app

ng serve

4.

Each web application has a main HTML file. For an Angular application, this is the index.html file that exists inside the src folder.

The declarations property is the place where we define all components that exist inside a module, so that they are 

discoverable by the framework.

5. VS code

intall extensions: Angular Essentials, Angular Language Service, Angular Snippets

6. typescript

no more var; use the let keyword wherever possible.

const ages: number[] = [8, 5, 12, 3, 1];

type Animal = 'Cheetah' | 'Lion';

const animal: Animal = 'Cheetah';

enum Brands { Chevrolet, Cadillac, Ford, Buick, Chrysler, Dodge };

const myCar: Brands = Brands.Cadillac;

TypeScript defines that a parameter is optional by adding the ? symbol as a postfix to the parameter name we want to make optional:

function greetMe(name: string, greeting?: string): string {

    if(!greeting) {

        greeting = 'Hello';

    }

    return greeting + ', ' + name;

}

Be aware that optional parameters should be placed last in a function signature.

Default parameter:

function greetMe(name: string, greeting: string = 'Hello'): string {

    return `${greeting}, ${name}`;

}

Rest parameter:

function greetPeople(greeting: string, ...names: string[]): string {

    return greeting + ', ' + names.join(' and ') + '!';

}

fat arrow:

const add = (x, y) => x + y;

Spread parameter:

const newItem = 3;

const oldArray = [1, 2];

const newArray = [...oldArray, newItem];

const oldPerson = { name : 'John' };

const newPerson = { ...oldPerson, age : 20 };

class decorators

property decorators

method decorators

parameter decorators

Nullable:

TypeScript knows to stop execution automatically when it runs into a nullable value.

for (let i = 0; i < hero.powers?.length; i++) {

}

A module works at a file level, where each file is the module itself, and the module name matches the filename without the .ts extension. Each member marked with the export keyword becomes part of the module's public API.

export class MyService {

    getData() {}

}

export const PI = 3.14;

import { MyService, PI } from './my-service';