準(zhǔn)備前提：已經(jīng)搭建好angular-cli環(huán)境，還未搭建好的請(qǐng)參見(jiàn)http://www.dbjr.com.cn/article/114254.htm

1 新建一個(gè)文件夾

該文件夾用來(lái)存放所有利用angular-cli搭建的web前端項(xiàng)目

2 啟動(dòng)命令窗口，并進(jìn)入該文件夾

3 創(chuàng)建新項(xiàng)目

ng new 項(xiàng)目名稱

注意：項(xiàng)目名稱最好全部用字母

3.1 到文件夾中去查看項(xiàng)目是否成功創(chuàng)建

4 通過(guò)文本編輯器打開(kāi)src文件夾下的index.xml文件

三少使用sublime打開(kāi)的效果如下

4.1 代碼詳解

這就是一個(gè)html文件

我們的應(yīng)用會(huì)在app-root標(biāo)簽處進(jìn)行渲染，app-root元素中的Loading...是一個(gè)站位符，用來(lái)告知用戶應(yīng)用正在加載，也可以用文字或者動(dòng)畫來(lái)代替

5 運(yùn)行應(yīng)用

5.1 打開(kāi)命令窗口，并進(jìn)入到項(xiàng)目根目錄

5.2 啟動(dòng)HTTP服務(wù)器

angular-cli有一個(gè)內(nèi)建的HTTP服務(wù)器，可以用它來(lái)啟動(dòng)我們的應(yīng)用，啟動(dòng)的時(shí)間大概要花30秒左右

ng server

注意：利用 ctrl + c 來(lái)關(guān)閉服務(wù)

5.3 通過(guò)瀏覽器訪問(wèn)應(yīng)用

http://localhost:4200/

6 制作第一個(gè)組件

6.1 為什么要制作組件

瀏覽器只能識(shí)別瀏覽器開(kāi)發(fā)人員預(yù)先定義好的那些標(biāo)簽，如果我們想要瀏覽器識(shí)別一些新的標(biāo)簽，那么就需要我們制作一個(gè)組件來(lái)完成這個(gè)任務(wù)

注意：組件化的基本思想就是教瀏覽器認(rèn)識(shí)一些擁有自定義功能的新標(biāo)簽（組件就相當(dāng)于angularJS中的指令），組件制作好后就可以在HTML文檔中使用啦

6.2 怎么創(chuàng)建一個(gè)組件

利用angular-cli的generate命令來(lái)創(chuàng)建組件

ng generate component 組件名稱

例如：創(chuàng)建一個(gè)<app-hello-world></app-hello-world>組件的命令是

ng generate component hello-world

注意：創(chuàng)建組件成功后在項(xiàng)目文件中的　　src>app　　目錄下回多出一個(gè)以組件名稱為名字的文件夾

7 組件創(chuàng)建完的后續(xù)步驟

7.1 查看組件的定義：Component注解、組件定義類

注意：組件是利用TypeScript語(yǔ)言編寫的，所以后綴是以 .ts 結(jié)尾的；瀏覽器是不知道怎么解析TypeScript文件的，但是 ng server 這個(gè)命令會(huì)自動(dòng)把ts文件轉(zhuǎn)換成js文件

7.2 組件定義代碼詳解

7.2.1 導(dǎo)入依賴

格式

import {組件1,，組件2} from 模塊名

代碼解釋：從@angular/core模塊中導(dǎo)入Component組件和OnInit組件

import 語(yǔ)句定義了我們?cè)诰帉懘a是需要用到哪些模塊中的哪些組件

7.2.2 Component注解

什么是注解：通過(guò)注解來(lái)給代碼添加功能

在類上使用@Component注解shi時(shí)，就會(huì)把相應(yīng)的類裝飾成一個(gè)Component

例如

代碼解釋

將HelloWorldComponent類裝飾成了一個(gè)組件

@Component注解內(nèi)容解釋

selector　　指定該組件使用什么DOM元素

例如

代碼解釋

該組件使用的DOM元素為<app-hello-world></app-hello-world>，即：在HTML中使用<app-hello-world></app-hello-world>標(biāo)簽后瀏覽器就可以識(shí)別啦

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論