[功能介紹-1] Angular架構 | Angular component
本文同步發佈於:ClairesBLOG[1]Angular是一個框架,用來編寫html的應用程式,可以用javascript或typescript去編寫。下圖是官網上所繪製的Angular架構圖:首先先看最中間那一塊,是由template、metadata、component所構成的,這三個是一個component必備的元素。所謂的元件可以看之前創建hero那篇文章,我們可以用下面指令創一個元件nggeneratecomponentselectSystem創完一個元件後,可以看見下面這些檔案Templates裡面的component.html檔就是template,它看起來像是一個html的檔案,可以在裡面用資料綁定與事件綁定與controller裡的物...
本文同步發佈於: Claires BLOG[1]
Angular是一個框架,用來編寫html的應用程式,可以用javascript或typescript去編寫。
下圖是官網上所繪製的Angular架構圖:
首先先看最中間那一塊,是由template、metadata、component所構成的,這三個是一個component必備的元素。所謂的元件可以看之前創建hero那篇文章,我們可以用下面指令創一個元件
ng generate component selectSystem創完一個元件後,可以看見下面這些檔案
Templates裡面的component.html檔就是template,它看起來像是一個html的檔案,可以在裡面用資料綁定與事件綁定與controller裡的物件做繫結。下面是一個template的範例:
<h2>Hero List</h2> <p><i>Pick a hero from the list</i></p> <ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> </ul> <app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>可以注意到上面有些地方與一般的html不相同,例如像是*ngFor、{{hero.name}}、(click)="selectHero(hero)"等...這就是架構圖畫面上用來連繫Component以及Template的兩個箭頭,property binding以及event binding。例如click事件繫結是(click)=functionName(),物件繫結可以用{{data}}。透過這樣的繫結可以讓templa...