Learning Angular - Third Edition Section 3 note

 Learning Angular - Third Edition Section 3 note

1. An Angular application must set the base HTML tag in the index.html file to enable pushState routing.

2.

a typical example of AppComponent is the following:

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

3.

ng generate module heroes --routing

The --routing parameter instructs the Angular CLI to create a routing module along with the heroes feature module.

4.

The order that we import routing modules in does matter. The router selects a route with a first match wins strategy. 

5. set default path

{ path: '', redirectTo: '/heroes', pathMatch: 'full' }

It is worth noting that we added the empty route path after all other routes because, as we have already learned, the order of the routes is important. We want more specific routes before less specific ones.

{ path: 'hero/:id', component: HeroDetailComponent }

The colon character denotes that id is a route parameter. If a route has more than one parameter, we separate them with /. 

6.

<p>{{hero?.name}} works!</p>

The ? character that we have added to the hero property is called a safe navigation operator. It is used to guard our component against null or undefined values of the hero property. If we do not use this operator, the delay that we experience because of the HTTP request will break our template. 

6.

Template-driven forms are easy to set up and add to an Angular application, but they do not scale well.

Reactive forms are more robust when it comes to scaling and testing, and when they are not interacting with the change detection cycle.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

7. 

password: new FormControl('', [

  Validators.required,

  Validators.minLength(6)

])

8. Angular material

import { MatDialogModule } from '@angular/material/dialog';

Learning Angular - Third Edition Section 2 note

 1.

=== checks not only whether values are equal but also whether types match. For example, 0 == '0' is truthy, whereas 0 === '0' is falsy.

2. Directives

*ngIf/*ngFor/ngSwitch

3. Pipes

| uppercase, | lowercase, | slice, | json, 

4. Building custom pipes

ng g pipe sort

<ul>

  <li *ngFor="let hero of heroes | sort:'name'; index as myIndex">

  </li>

</ul>

5.

If we need a template, we create a component; otherwise, make it a directive.

ng g directive copyright

A directive is a TypeScript class marked with the @Directive decorator. The only required property in the decorator is the selector of the directive.

6.

ng g module heroes

The main application module, AppModule, does not need to import CommonModule. Instead, it imports BrowserModule, which is used to run Angular applications in a browser platform that exports CommonModule by itself.

ng g component heroes/heroList --module=heroes

need exports in the child module, and import in the app.module.ts

Lazy loaded modules are not declared in the imports property of a module.

7.

When we run the ng build --configuration=production command, the Angular CLI replaces the environment.ts file with the environment.prod.ts file.

the component should only be concerned with presentation logic.

Delegating complex tasks to services.

ng g service heroes/hero

An Angular service is a TypeScript class marked with the @Injectable decorator. The decorator identifies class as an Angular service that can be injected into an Angular component or another Angular service. 

the constructor injection pattern is the one enforced by Angular. 

8.

A Promise object accepts two parameters; a resolve method to indicate that the promise completed successfully and optionally return a result, and a reject method to indicate that an error occurred during execution and optionally return the cause of the error.

To summarize the limitations of promises, note the following:

They cannot be canceled.

They are immediately executed.

They are one-time operations only; there is no easy way to retry them.

They respond with only one value.

9.

When we define an observable variable, we tend to append the $ sign to the name of the variable. This is a convention that we follow so that we can identify observables in our code efficiently and quickly.

  private setTitle = () => {

    const timestamp = new Date().toString()

    this.title = `Hello Angular 10 (${timestamp})`;

  }

  title$ = new Observable(observer => {

    setInterval(() => {

        observer.next();

    }, 1000);

  });

  constructor(){

    this.title$.subscribe(this.setTitle);

  }

10. RxJS

We have already learned how to create an observable from a DOM event using the fromEvent operator. Two other popular operators that are concerned with observable creation are the of and from operators.

const values = of(1, 2, 3);

values.subscribe(value => console.log(value));

The from operator is an excellent way to start migrating from promises to observables in your Angular application if you have not done so already!

11.

npm install angular-in-memory-web-api --save-dev

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'; 

windows 10 msc error

Windows 10

This app has been blocked for your protection, mmc.exe

Windows 10 Pro x64 Version 1703 (OS Build 15063.502)

When trying to run "Computer Management", I receive a dialog saying: This app has been blocked for your protection. Under that it says mmc.exe and compmgmt.msc

The below worked for me

1. Open Run and type: secpol.msc

2. Click on Local Policies

3. Look for, and right-click User Account Control: Run all administrators in Admin Approval Mode

4. Select properties and then Disable

https://answers.microsoft.com/en-us/windows/forum/all/this-app-has-been-blocked-for-your-protection/e1d11ec3-8544-4c4b-afe3-1cf075681280

English

 Bane of my existence/life

Superman Kryptonite -> Achilles' heel