Angular環境搭建

Angular4 隨筆（一）----環境搭建

 1.下載node.js

 　　第一步：在瀏覽器中搜索node.js官網(https://nodejs.org/zh-cn/),根據本身系統下載相應版本，下載完成之後，下一步-->下一步--> ....安裝完畢；

   　　  第二步：打開命令行工具，輸入node -v 檢查版本號，以下圖時，說明node已經安裝成功

                        

　　　　註釋：v8.11.3表明當前node.js版本號：v8.11.3

　　2.安裝 angular-cli 命令工具

　　　　第一步：在命令行工具 輸入 npm install -g @angular/cli 

　　　　第二步：在命令行工具輸入 ng -v 檢查 angular-cli 命令工具是否安裝成功，以下圖：說明已經安裝成功

                         

 3.使用angular-cli

　　第一步：建立angular項目

　　　　　　在命令行工具輸入 ng new demo01 (ng new 項目名稱)，以下圖：

　　　　　　　　

　　　　　　註釋：若是在下載依賴時出現錯誤，能夠在下載目錄上找到demo01 ,刪除node_modules 文件夾，在命令行工具上 輸入：

　　　　　　　　cd demo01   (--進入angular 項目demo01下)

　　　　　　　　npm install   (或 cnpm install -- 從新安裝angular 依賴包)  

　　第二步：運行angular項目

　　　　　　在命令行工具輸入以下指令

　　　　　　　　cd demo01 （進入angular項目）

        　　　　　　ng serve    （編譯angualr 項目）

 　　　　　  打開瀏覽器，輸入 localhost:4200，以下圖：

　　　　　　　　

　　第三步：經常使用指令

　　　　① 建立組件 

　　　　　　ng g component home  或

　　　　　 ng g component components/home

　　　　② 建立管道

　　　　　　ng g pipe mypipe  或

　　　　　 ng g pipe pipes/mypipe

　　　　 ③ 建立服務

　　　　　　ng g service loger  或

　　　　　　ng g service services/loger

　　　　 ④ 建立模塊

　　　　　   ng g module mymodule 或

　　　　　ng g module modules/mymodule