Angular02 經過angular-cli來搭建web前端項目

 利用angular-cli的常見命令：

　 npm i --save 包名   ->  軟件依賴
    npm i --save-dev 包名     ->  開發依賴
    ng new 項目名  ->  建立新項目
    ng build -prod  ->  生產環境編譯
    ng serve  ->  啓動開發服務器
    ng new 項目名 --skip-install  -> 不進行模塊安裝  ng new 項目名 -si
    ng new 項目名 -si --style=scss -> 執行樣式風格
    ng g m 模塊名
    ng g c 組件名 --spec=false   ->  建立一個沒有測試文件的組件

 

準備前提：已經搭建好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 serve

　　　　　　

　　　　　　　　注意：利用 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元素

　　　　　　　　templateUrl　　添加模板的引用位置，當angular加載組件的時候就會讀取指定模板中的內容做爲組件的模板

　　　　　　　　　　注意：可使用template來直接添加模板代碼，而不須要另外的模板文件

　　　　　　　　　　　　例如

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　注意：模板代碼是放在反引號中的

　　　　　　　　styleUrls　　添加CSS樣式文件的引用位置，當angular加載組件的時候就會讀取指定文件中內容來做爲組件的樣式　　

　　　　　　例如

　　　　　　　　

　　　　　　　　代碼解釋

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

　　　　　　　　　　該組件的模板代碼在同目錄下的 hello-world.component.html 中

　　　　　　　　　　該組件的CSS樣式代碼在同目錄下的 hello-world.component.css 中

　　7.3 加載組件

　　　　咱們須要將組件的標籤添加到一個將要渲染的模板中去　　

　　　　將　　<app-hello-world></app-hello-world>標籤　　添加到 src/app/app.component.html文件中去

　　　　　　　　這樣作是爲了讓組件渲染一個靜態模板，從而觀察到效果

　　　　

　　　　啓動HTTP服務，而後刷新瀏覽器或的結果以下