Angular01 通過angular-cli來搭建web前端項目

標籤：文本   檔案   添加   .com   image   前端   host   專案檔   文字編輯器   

 

準備前提：已經搭建好angular-cli環境，還未搭建好的請參見三少的部落格（開發基礎分類）

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>標籤後瀏覽器就可以識別啦

 

 

　　

　　　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　　　

 

 

 

 

 

 

 

 

 

 

 

 

 

　　

 

Angular01 通過angular-cli來搭建web前端項目