Angualr2 (step2) 概述

Angualr 基本模板语法

获取Demo地址

• 插值表达式 {{ }}

<p>name:{{name}}</p>

• 模板表达式 [property]="expression"，模板表达式产生一个值。 Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。

• 模板语句 (event)="statement" ，模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。

<button (click)="buttClick()">按钮</button>

• 绑定语法

  • 单向 从数据源 到 视图目标（插值表达式、Property、Attribute、类、样式）
    
    • {{expression}}
    • [target] = "expression"
    • bind-target = "expression"
  • 单向 从视图目标 到 数据源 (事件)
    
    • (target) = "statement"
    • on-target = "statement"
  • 双向 (双向)
    
    • [(target)] = "expression"
    • bindon-target = "expression"

• 内置结构型指令

  • NgIf - 根据条件把一个元素添加到DOM中或从DOM移除
    
    • <div *ngIf="true">Hello</div>
  • NgFor - 对列表中的每个条目重复套用一个模板更多
    
    • <div *ngFor="let name of names;let i=index">{{name}}</div>
  • NgSwitch - 一组指令，用于切换一组视图

<div [ngSwitch]="currentHero.emotion">
    <span *ngSwitchCase="'v1'"></span>
    <span *ngSwitchCase="'v2'"></span>
    <span *ngSwitchDefault></span>
</div>

• 输入输出属性 ( @Input 和 @Output )

@Input()  name: string;
@Output() buttAction = new EventEmitter<string>();

或者 

@Component({
  inputs: ['name'],
  outputs: ['buttAction'],
})

二选一

获取更多更详细模板语法！

主要架构

• 生命周期钩子
• 模块 NgMoule
• HTTP
• 路由 Router

模块 (module)

1. 使用命令 ng g module my-module 新建一个模块
2. 2.

组件 (component)

1. 使用 cli 新建ng g component user/user-info

路由 (router)

1. <router-outlet></router-outlet>
2. 为模块创建路由

import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main/main.component'

const routes: Routes = [
  { path: 'main', component: MainComponent },
  { path: '', redirectTo: '/main', pathMatch: 'full' }
];

指令 (directive)

服务 (service)

HTTP

// Mac 打开浏览器跨域
open -a "Google Chrome" --args --disable-web-security  --user-data-dir