Angular基礎筆記（架構）

sicily621發表於2018-05-14
Angular筆記架構

模組（ngModule）

一個ngModule就是一個容器，用於存放一些元件，服務或其他程式碼檔案，作用是提供一個編譯上下文環境。

@NgModule({
  declarations: [],//可宣告物件表
  imports: [],//匯入表
  exports:[],//匯出表
  providers: [],//服務
  bootstrap: []//主檢視
})
複製程式碼

它也可以匯入其它模組的功能，匯出一些功能供其它模組使用。

import {Component} from '@angular/core';//從@angular/core庫匯入Component裝飾器
export class AppModule { }//匯出模組
複製程式碼

元件(component)

元件控制螢幕上被稱為檢視的一小塊區域。元件扮演著控制器和檢視的角色，模板則扮演檢視的角色。作用是通過在類中定義元件的屬性方法與檢視互動。

//dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero';
import {HeroService} from '../hero.service';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  heroes:Hero[];
  constructor(private heroService:HeroService) { }

  ngOnInit() {
  	this.getHoures()
  }
  getHoures():void{
  	this.heroService.getHeroes()
  	.subscribe(heroes => this.heroes = heroes.slice(1,5))
  }

}


複製程式碼
//dashboard.component.html
<h2>Top Heroes!</h2>
<div class="grid grid-pad">
	<a *ngFor='let hero of heroes' class='col-1-4' routerLink = '/detail/{{hero.id}}'>
		<div class='module hero'>
			<h4>{{hero.name}}</h4>
		</div>
	</a>
</div>
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
複製程式碼

模板語法

a.資料繫結

  • {{hero.name}}插值表示式
  • [hero]屬性繫結；
  • (click)事件繫結；
  • [(ngModel)]雙向資料繫結

b.管道

@pipe可以自定義，也可以用Angular自帶的管道，用來在模板中宣告顯示值的轉換邏輯，相當於filter。在html中用管道操作符|。比如

{{interpolated_value | pipe_name}}
複製程式碼

c.指令

模板可以根據指令對dom進行轉換，元件其實也是指令，是一個帶有@directive裝飾器的類。

結構型指令

<li *ngFor="let hero of heroes"></li>
複製程式碼

屬性型指令

<input [(ngModel)]="hero.name">
複製程式碼

服務與依賴注入

狹義的服務是一個明確定義了用途的類。Angular把元件和服務分開，元件只負責資料繫結的屬性和方法，元件不負責從伺服器獲取資料、驗證使用者輸入、寫日誌，這是服務要做的，然後注入到任意元件。

@Injectable({
  providedIn: 'root'
})
export class HeroService {
  getHeroes ():Observable<Hero[]>{
  	this.messageService.add('HeroService:fetched heroes')
  	return this.http.get<Hero[]>(this.heroesUrl)
  	           .pipe(
  	           		tap(heroes => this.log(`fetched heroes`)),
  	           		catchError(this.handleError('getHeroes',[]))
  	           	)
  };
  constructor(
  	private http:HttpClient,
  	private messageService:MessageService
  ) { }
}
複製程式碼

依賴注入（DI） 要用任何類都必須用注入器註冊一個提供商，以便註冊器可以使用它來建立新例項。注入器是主要的機制，不用自己建立。

相關文章