Learn

CLI

ng new first
ng serve --open
ng generate component heroes

数据模型

Angular使用Service获取数据，然后把数据注入到Component中，Component应该只关注数据的展示，数据的交互是委托给服务进行的。

Angular核心 – Angular Compiler与Angular Runtime。

Compiler负责去解析开发应用中的html模板、typescript代码、 样式，提取元数据，模板表达式等必要的信息，然后将其转化、优化最终生成实际运行的代码。理所应当的，Runtime会去消费生成的代码，将其组织并运行起来。

插值绑定，管道指令

<h2> Details</h2>

双向绑定

<input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">

event binding

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

class binding

# Angular's class binding can add and remove a CSS class conditionally
<li *ngFor="let hero of heroes"
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">
  <span class="badge"></span> 
</li>

property binding, one way data binding

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

decorator

@Component
@NgModule
@Input()
@Input() hero?: Hero;

metadata

Some of the metadata is in the @Component decorators that you added to your component classes. Other critical metadata is in @NgModule decorators.

NgModule

Every component must be declared in exactly one NgModule. Angular CLI declared HeroesComponent in the AppModule when it generated that component.

# src/app/app.module.ts
import { HeroesComponent } from './heroes/heroes.component';

declarations: [
  AppComponent,
  HeroesComponent
],

指令

# repeater directive
<li *ngFor="let hero of heroes">
# *ngIf directive 
<div *ngIf="selectedHero">

路由

路由指的是在页面中放置一个路由标签，该路由便签会被路由地址指向的component替换，即 会告诉路由器要在哪里显示路由的视图。 <h1></h1> ！router-outlet会被实际的控件替代

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },

模板引用变量（template reference variables）

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

<input type="text" [value]="value" #name>

模板字符串字面量Template literals (Template strings)

`string text ${expression} string text`