1. 程式人生 > >Angular 2.0專案結構基本介紹

Angular 2.0專案結構基本介紹

    使用Angular-cli新建專案後,基本可以得到如下目錄結構:


    1.根模組    

    其中app.module.ts是該專案的一個根模組,使用@NgModule修飾,表示該Class是一個模組,declarations表示該模組包含的檢視類,imports表示該模組需要其他模組匯出的類,provider是模組包含的servicebootstrap包含該模組啟動時,需要啟動的根元件,因此AppComponent是該專案的根元件。


    2.根元件

    不管是根元件還是普通元件,都是有@Component修飾,templateUrl表示該元件對應的html,styleUrls

表示該模組對應的cssselector表示templateUrl在那個html元素開始顯示。下面這個截圖表示的就是,app.component.html對應的程式碼將在<app-root></app-root>中顯示。


    如果是根元件的話,還需要在templateUrl對應的html程式碼中增加如下程式碼:

<router-outlet></router-outlet>
   這樣其他元件對應的selector才能找到位置去顯示。

    3.服務

    其中http.service.ts就是service,

@Injectable()
export class HttpService {

  constructor() { }

 
}
    服務可以依賴注入,需要使用@Injectable修飾。當某個component需要使用某個service時,在component對應的construct中需要依賴注入對應的service,比如如下UserConponent需要使用HttpService,所以需要在construct中依賴注入。

    4.路由

    其中app.routing.ts就是對應的路由。其中path是對應的路徑,conponent就是path對應的conponent。路由和service一樣,當某個component需要使用路由時,需要在construct中宣告