Angular通過angular-cli來搭建web前端項目的方法，angularangular-cli

Angular通過angular-cli來搭建web前端項目的方法，angularangular-cli

準備前提：已經搭建好angular-cli環境，還未搭建好的請參見http://www.bkjia.com/article/114254.htm

1 建立一個檔案夾

該檔案夾用來存放所有利用angular-cli搭建的web前端項目

2 啟動命令視窗，並進入該檔案夾

3 建立新項目

ng new 項目名稱

注意：項目名稱最好全部用字母

　

3.1 到檔案夾中去查看項目是否成功建立

4 通過文字編輯器開啟src檔案夾下的index.xml檔案

三少使用sublime開啟的效果如下

4.1 代碼詳解

這就是一個html檔案

我們的應用會在app-root標籤處進行渲染，app-root元素中的Loading...是一個站位符，用來告知使用者應用正在載入，也可以用文字或者動畫來代替

5 運行應用

5.1 開啟命令視窗，並進入到項目根目錄

5.2 啟動HTTP伺服器

angular-cli有一個內建的HTTP伺服器，可以用它來啟動我們的應用，啟動的時間大概要花30秒左右

ng server

注意：利用 ctrl + c 來關閉服務

5.3 通過瀏覽器訪問應用

http://localhost:4200/

6 製作第一個組件

6.1 為什麼要製作組件

瀏覽器只能識別瀏覽器開發人員預先定義好的那些標籤，如果我們想要瀏覽器識別一些新的標籤，那麼就需要我們製作一個組件來完成這個任務

注意：組件化的基本思想就是教瀏覽器認識一些擁有自訂功能的新標籤（組件就相當於angularJS中的指令），組件製作好後就可以在HTML文檔中使用啦

6.2 怎麼建立一個組件

利用angular-cli的generate命令來建立組件

ng generate component 組件名稱

例如：建立一個<app-hello-world></app-hello-world>組件的命令是

ng generate component hello-world

注意：建立組件成功後在專案檔中的　　src>app　　目錄下回多出一個以組件名稱為名字的檔案夾

7 組件建立完的後續步驟

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

注意：組件是利用TypeScript語言編寫的，所以尾碼是以 .ts 結尾的；瀏覽器是不知道怎麼解析TypeScript檔案的，但是 ng server 這個命令會自動把ts檔案轉換成js檔案

7.2 組件定義代碼詳解

7.2.1 匯入依賴

格式

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

代碼解釋：從@angular/core模組中匯入Component組件和OnInit組件

import 語句定義了我們在編寫代碼是需要用到哪些模組中的哪些組件

7.2.2 Component註解

什麼是註解：通過註解來給代碼添加功能

在類上使用@Component註解shi時，就會把相應的類裝飾成一個Component

例如

代碼解釋

將HelloWorldComponent類裝飾成了一個組件

@Component註解內容解釋

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

例如

代碼解釋

該組件使用的DOM元素為<app-hello-world></app-hello-world>，即：在HTML中使用<app-hello-world></app-hello-world>標籤後瀏覽器就可以識別啦

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。