我們在上一章 Angular - Start新手上路，開始寫程式了

新增的一個Project "my-project"，並且也新增了一個component "first-app"

然後我們就會發現以下的資料目錄，其中有我們會發現有三個html檔案，

今天我們就來討論這三個檔案的用途與範例

image

首先我們先來看index.html

 
html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyProject</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

 

再來，我們再來看app.component.html，我們先將裡面的內容清料，改成以下的code

 
html
<p>this is app root, wrote in "app.component.html"</p>

最後，我們再來檢視first-app.component.html，也改成以下的code

 
html
<p>first-app works!</p>
<p>wrote in "first-app/first-app.component.html"</p>

啟動我們的網頁服務後，會發現的首頁只有app.component.html的內容，並沒有first-app.component.html的內容

image

而且你會發現在index.html內有<app-root></appp-root>用來將我們app.component.html的內容呼叫進來

現在我們在app.component.html內，也把<app-first-app></appp-first-app>加進去

 
html
<p>this is app root, wrote in "app.component.html"</p>
<app-first-app></app-first-app>

讓我們再來看看，這時我們的首頁是不是也把first-app.componenent.html的內容也呈現出來了

image

這就是Angular模組化的維護、撰寫網頁的方式

 

 

arrow
arrow
    全站熱搜

    Cheng yichung 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄