一. 腳手架安裝
全域性安裝腳手架：npm install -g @angular/cli複製程式碼建立新專案：
ng new my-app（專案名）複製程式碼轉到專案目錄：
cd my-app複製程式碼啟動伺服器：
ng serve --open 複製程式碼注：如果 4200 視窗已啟動，再次啟動伺服器，命令列提示報錯：
Port 4200 is already in use. Use '--port' to specify a different port複製程式碼需要輸入命令列：
ng serve -o --port 1111（視窗名），啟動新視窗複製程式碼建立新元件：
ng generate component heroes（元件名）複製程式碼Angular最佳實踐是在單獨的頂級模組中載入和配置路由器：
ng generate module app-routing --flat --module=app
複製程式碼路由器插座，為了匯出：
<router-outlet></router-outlet> 複製程式碼 如果提示安裝包出錯：
先檢查是不是網路問題，可以安裝淘寶映象cnpm
最傻瓜式操作：移除 node_modules 資料夾及 package-lock.json 檔案，執行npm install
對於部分類庫版本低的問題怎麼檢視：腳手架在 package.json 裡多數類庫都是使用寬鬆的版本號，^0.1.0 帶有 ^ 符號表示使用最新次版本號
注意： 這種方式會對所有類庫按比較新的版本安裝，但有可能會導致由於第三方型別的破壞性變更會導致一些不必要的麻煩
二. angular 指令
[ngModel] ( 雙向繫結 )
<input type="text" [(ngModel)]="title"> 複製程式碼ngNonBindable ( 禁止繫結 )
<div ngNonBindable>{{title}}</div>
注：使用了 ngNonBindable ，花括號就會被當做字串一起顯示出來。
複製程式碼[ngStyle] ( 繫結style樣式 )
<div [ngStyle]="{'background-color': 'red'}"></div>
繫結一組樣式：
<div [ngStyle] = 'divStyle'>div繫結一組樣式</div>
divStyle = {
'background':'#ccc',
'font-size':'30px'
} 複製程式碼[class.active] ( class動態繫結 )
[class.active]="isActive"
繫結多個：
<div [ngClass]="{'active1': 'true', 'active2': true}">class</div>
複製程式碼*ngIf ( 控制DOM元素新增和刪除 )
<div *ngIf = 'true'>新增元素</div>
<div *ngIf = 'false'>刪除顯示</div>
複製程式碼(click) ( 事件繫結 )
<div (click) = 'divClick()'>點選</div>
複製程式碼.enter( 事件修飾符)
<input type="text" (keyup.enter) = "divClick()">複製程式碼*ngFor ( 迴圈一個陣列物件 )
<ul *ngFor = "let v of obj;let i=index">
<li>{{v}}--{{i}}</li>
</ul>
複製程式碼[ngSwitch] ( 迴圈語句 )
message = {'name':'tian'}
<ul [ngSwitch]="message.name">
<li *ngSwitchCase="tian">滿足條件</li>
<li *ngSwitchCase="kuo">不滿足條件</li>
<li *ngSwitchDefault>預設</li>
</ul>複製程式碼三. angular 幾種常用方法
$event事件代理
<ul (click) = "eventAgent($event)">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
eventAgent(event){
console.log(event.target)
}複製程式碼set監聽
set title(newTitle: string){
console.log(newTitle)//返回監聽屬性值
}複製程式碼四. angular 生命週期函式
1、指令與元件共有的鉤子：
ngOnChanges( 當資料繫結輸入屬性的值發生變化時呼叫 )
ngOnInit( 在第一次 ngOnChanges 後呼叫)
ngDoCheck( 自定義的方法，用於檢測和處理值的改變 )
ngOnDestroy( 指令銷燬前呼叫 )
複製程式碼 2、元件特有的鉤子
ngAfterContentInit( 在元件內容初始化之後呼叫 )
ngAfterContentChecked( 元件每次檢查內容時呼叫 )
ngAfterViewInit( 元件相應的檢視初始化之後呼叫 )
ngAfterViewChecked( 元件每次檢查檢視時呼叫 )複製程式碼五. angular 元件
//子元件
<div>
child
</div>
//父元件
<div>
parent
//子元件在父元件渲染
<app-child></app-child>
</div>
複製程式碼@Component({
selector: 'app-child',
templateUrl: './app-child.component.html',
styleUrls: ['./app-child.component.less']
})
複製程式碼六. 父子<=>傳參
1. 父=>子元件傳參（1）
父傳子：
<div>
<app-child [name] = "title"></app-child>
</div>
子元件接收：
@Input()//輸入屬性，在父元件通過屬性繫結，傳遞資料到子元件（父=>子）
public name
接收引數
receiving(){
//列印所傳引數
console.log(this.name)
}
執行此方法完成傳參：this.receiving()
複製程式碼 2. 子=>父元件傳參（2）
子傳父：
<div>
<app-heros1 [name] = "title" (foo) = "bar($event)"></app-heros1>
</div>
bar(event){
console.log(event);//列印‘傳入父級元件’
}
子元件傳入
@Output() //輸出屬性，在父元件通過繫結事件，把子元件中的資料傳遞到父元件（子=>父）
foo = new EventEmitter<string>();
todo(){
this.foo.emit('傳入父級元件');
}
執行此方法完成傳參：this.todo()
複製程式碼七. 服務注入
// 將父元件當做服務注入到子元件中
import {AppComponent} from "../app.component";
constructor(
private appComponent:AppComponent,
) { }
// 將子元件當做服務注入到父元件中
import { ViewChild } from '@angular/core';
import { HeaderComponent } from './header/header.component';
@ViewChild(HeaderComponent)
private headerComponent: HeaderComponent;
注：父子元件不可互相作為服務注入模組複製程式碼八. 路由跳轉及傳參
// 跳轉路由需引入
import { ActivatedRoute, Router } from '@angular/router';
<button (click) = "jump()">跳轉</button>
constructor(
private activatedRoute: ActivatedRoute,//接受跳轉後傳入的物件
private router: Router, //設定路由跳轉
){}
jump():void{
// navigate 第一個引數為英雄路由，第二個引數是跳轉路由傳入的值（所傳值是JSON物件）
this.router.navigate(["/heros",{queryParams:{obj:{ id: 1, foo: 'foo' }}}])
}
//跳轉路由取值
console.log(JSON.parse(this.activatedRoute.queryParams['value'].obj))
結合以上路由跳轉可能會用到此方法，返回上一級路由
this.location.back()
複製程式碼