Angular從零到一1 4 第乙個元件

2021-09-23 16:15:07 字數 1029 閱讀 5106

1.4 第乙個元件

wangpengdemacbook-pro:blog wangpeng$ ng generate component login --inline-template --inline-style

installing component

wangpengdemacbook-pro:blog wangpeng$?

是不是感覺這個命令列太長了?幸運的是angular團隊也這麼想,所以你可以把上面的命令改寫成  ng g c login -it -is  ,也就是說可以用generate的首字母g來代替generate,用component的首字母c來代替component,類似的--inline-template的兩個詞分別取首字母變成-it。

angular-cli為我們在login目錄下生成了兩個檔案,其中 login.component.spec.ts 是測試檔案,我們這裡暫時不提。另乙個login.component.ts 就是我們新建的component了。

angular提倡的檔案命名方式是這樣的:元件名稱.component.ts ,元件的html模板命名為:元件名稱.component.html,元件的樣式檔案命名為: 元件名稱.component.css。建議讀者在編碼中盡量遵循google的官方建議。

我們新生成的login元件原始碼如下:

import from '@angular/core';

//@component是angular提供的裝飾器函式,用來描述compoent的元資料

//其中selector是指這個元件的在html模板中的標籤是什麼

//template是嵌入(inline)的html模板,如果使用單獨檔案可用templateurl

//styles是嵌入(inline)的css樣式,如果使用單獨檔案可用styleurls

@component(

ngoninit() {

儲存後返回瀏覽器,可以看到我們的第乙個元件也顯示出來了,如圖 1.5所示。

圖1.5 第乙個元件的顯示

Angular從零到一1 6 引導過程

1.6 引導過程 import polyfills.ts 連同angular編譯器一起發布到瀏覽器 import from angular platform browser dynamic import from angular core import from environments envir...

git從零到一

源 有必要管理起嗎?1.02.0 svn,vss,vcs git 有必要,因為人工的去處理不同的版本,做相應備份會很麻煩。git是linux之父當年為了維護linux linus之前也是手動維護合併把檔案發給linus linus自己寫了乙個版本管理的工具 git 開啟冰箱門 放大象關上冰箱 2.把...

git使用從零到一

1 pwd 列印當前資料夾的全名稱 2 ls a 預設 列印當前資料夾下面的內容,不會輸入.開頭的檔案 資料夾 b ls a 在上面的基礎上 開頭的檔案 資料夾 c ls l 在列舉檔案的時候會列舉出他們的諸如 建立者 建立日期等資訊 d ls 指定資料夾路徑 列舉出該資料夾下面的內容 3 cd 切...