這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在Angular中使用angular-cli搭建一個(gè)web前端項(xiàng)目，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
1 新建一個(gè)文件夾
該文件夾用來存放所有利用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 通過文本編輯器打開src文件夾下的index.xml文件
三少使用sublime打開的效果如下
4.1 代碼詳解
這就是一個(gè)html文件
我們的應(yīng)用會(huì)在app-root標(biāo)簽處進(jìn)行渲染，app-root元素中的Loading...是一個(gè)站位符，用來告知用戶應(yīng)用正在加載，也可以用文字或者動(dòng)畫來代替
5 運(yùn)行應(yīng)用
5.1 打開命令窗口，并進(jìn)入到項(xiàng)目根目錄
5.2 啟動(dòng)HTTP服務(wù)器
angular-cli有一個(gè)內(nèi)建的HTTP服務(wù)器，可以用它來啟動(dòng)我們的應(yīng)用，啟動(dòng)的時(shí)間大概要花30秒左右
ng server
注意：利用 ctrl + c 來關(guān)閉服務(wù)
5.3 通過瀏覽器訪問應(yīng)用
http://localhost:4200/
6 制作第一個(gè)組件
6.1 為什么要制作組件
瀏覽器只能識(shí)別瀏覽器開發(fā)人員預(yù)先定義好的那些標(biāo)簽，如果我們想要瀏覽器識(shí)別一些新的標(biāo)簽，那么就需要我們制作一個(gè)組件來完成這個(gè)任務(wù)
注意：組件化的基本思想就是教瀏覽器認(rèn)識(shí)一些擁有自定義功能的新標(biāo)簽（組件就相當(dāng)于angularJS中的指令），組件制作好后就可以在HTML文檔中使用啦
6.2 怎么創(chuàng)建一個(gè)組件
利用angular-cli的generate命令來創(chuàng)建組件
ng generate component 組件名稱
例如：創(chuàng)建一個(gè)
ng generate component hello-world
注意：創(chuàng)建組件成功后在項(xiàng)目文件中的 src>app 目錄下回多出一個(gè)以組件名稱為名字的文件夾
7 組件創(chuàng)建完的后續(xù)步驟
7.1 查看組件的定義：Component注解、組件定義類
注意：組件是利用TypeScript語言編寫的，所以后綴是以 .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 語句定義了我們在編寫代碼是需要用到哪些模塊中的哪些組件
7.2.2 Component注解
什么是注解：通過注解來給代碼添加功能
在類上使用@Component注解shi時(shí)，就會(huì)把相應(yīng)的類裝飾成一個(gè)Component
例如
代碼解釋
將HelloWorldComponent類裝飾成了一個(gè)組件
@Component注解內(nèi)容解釋
selector 指定該組件使用什么DOM元素
例如
上述就是小編為大家分享的怎么在Angular中使用angular-cli搭建一個(gè)web前端項(xiàng)目了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
