Angular - MacKittipat/note-developer GitHub Wiki

• Intro

  • Angular is a platform and framework for building single-page client applications using HTML and TypeScript

• Module

  • Every Angular app has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts
  • @NgModule() decorator is a function that takes a single metadata object
    • declarations: List of components, directives, and pipes in the module.
    • imports: List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
    • exports: List of components, directives, and pipes that will be available for other module.
    • providers: List of dependency injection providers visible both to the contents of this module and to importers of this module.
    • bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.

Components are declared, Modules are imported, and Services are provided

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  declarations: [ AppComponent ],
  imports:      [ BrowserModule ],
  exports:      [ AppComponent ],
  providers:    [ Logger ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

• Component
  • Reuseable sets of UI functionality.
  • Consist of 3 things
    • heroes.component.ts A component class that handles data and functionality.
    • heroes.component.html An HTML template that determines the UI.
    • heroes.component.css Component-specific styles that define the look and feel.

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

• Service

  • The place where you share data between parts of your application

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

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  messages: string[] = [];

  constructor() { }

  add(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }
}

• Interpolation binding {{ }}
• Property binding [ ]
• Event binding ( )
• Two-way data binding [(ngModel)]
• Pipe operator |, used for format strings, currency amounts, dates and other display data

• Structural directives
  • *ngFor, Repeater directive
  • *ngIf

<div *ngFor="let product of products">
</div>

<p *ngIf="product.description">
</p>

• Attribute directives
  • [(ngModel)]

# Create new angular app name
ng new {APP_NAME}

# Run angular app and open browser
ng serve --open 

# Generate component 
ng generate component {COMPONENT_NAME}

# Generate service 
ng generate service {SERVICE_NAME}

• Input
  • @Input() decorator indicates that the property value passes in from the component's parent
• Output
  • @Output() output = new EventEmitter();

• https://testing-angular.com/introduction/#introduction

• https://angular.io/guide/cheatsheet
• https://angular.io/guide/template-syntax#input-and-output-properties
• https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
• https://codecraft.tv/courses/angular/reactive-programming-with-rxjs/streams-and-reactive-programming/#