Angular CLI 專案簡要解析

-

Components是Angular 7設計成網頁的主要成分，再利用module將components整合在一起，一個module中除了有component之外主要還會有app.module.ts和app.routing.module.ts，在此要針對最基本的組成做簡要說明，當然還有更多，在此暫時省略。
一、解析Component
1.已知Component在Angular 專案中佔有重要的地位，所以要深入來了解一下：
2.在專案的src目錄下找到index.html網頁，用編輯器打開




3.在index.html中(如上圖)可以發現一個html 指令 <app-root></app-root>，因為個人常寫html網頁所以知道這不是普通的html 指令。應該是Angular 專案中特殊指令。是的，這就是代表一個Component 的html指令。
4.接著到專案中的src/app目錄找到app.component.ts檔案，用編輯器打開。


5.從上圖可看到app.component.ts檔案中只有幾行指令，現在想要來解讀之：
(1)從@angular/core匯入Component
(2)@Component({...}) 是typescript 指令要定義Component的屬性，在此定義了selector、templateUrl、styleUrls三個屬性。
(3) selector表示，顯示在html網頁中的指令(<app-root></ app-root>)
(4) templateUrl表示，app-root 代表一段html指令，而這段指令寫在templateUrl所顯示的檔案，也就是app.component.html。
(5) styleUrls表示app.component.html中會用到節CSS指令放在app.component.css檔案中
(6) 這稱為factory方法
(7)最後看到一個叫AppCoponent的類別被匯出，而且有一個叫做title的屬性。這個AppComponent就是傳說中的Model，Model其實是前端與後端互傳資料的工具。用於Property Binding
6.由MVC的觀點來看component，一個component剛好組成一個小小的MVC架構：
(1) app.component.ts 整組程式相當於controller
(2) app.component.html相當於View
(3) AppComponent的類別，可以看成是廣義的model，狹義的model是指AppComponet內的FormGroup 類別的實體。
7.Angular 中的component，在angular CLI中，設計網頁時，相當於HTML 的指令，如<app-root></ app-root>，直接就可以當作HTML 的指令用，而且component 的view中還可以有component
二、app.module.ts
AppModule在angular 中很重要，所有建立的component都要在此宣告，利用angular CLI指令建立component時會自動加入。
我們看下圖，首先滙入NgModule類別，然後建立NgModule物件，此物件有5個重要屬性陣列，
  1. declarations：這個Module內部Components/Directives/Pipes的列表，聲明這個Module的內部成員
  2. imports：這個模組所需用到的Angular提供的或第三方提供的Angular資源庫（如FormsModule、HttpModule等），先匯入再將類別加入此陣列。
  3. providers：一些供這個模組使用的service，在此宣告後所有下面的元件都可以直接使用這個服務。
  4. bootstrap：這個屬性只有根模組需要設定，在此設定在一開始要進入的模組成員是那一個。預設是AppComponent
  5. exports：用來控制將哪些內部成員暴露給外部使用。

三、app-routing.module.ts

在 Angular 中，最好在一個獨立的頂級模組中載入和配置路由器，它專注於路由功能，然後由根模組 AppModule匯入它。
按照慣例，這個模組類的名字叫做 AppRoutingModule，並且位於 src/app 下的 app-routing.module.ts 檔案中。
使用 CLI 產生它。

--flat 把這個檔案放進了 src/app 中，而不是單獨的目錄中。
--module=app 告訴 CLI 把它註冊到 AppModule 的 imports 陣列中。
下圖是路徑檔的範例，
1.首先將component匯入到此檔中
2.給每個匯入的component指定一個路徑
3.則能在http://localhost:4200/路徑中 瀏覽到該component
4.或是
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>


四、專案的簡要架構

下圖標出專案的簡要架構，初學先知道這些，將來再漸漸深入。


留言

張貼留言