一、 準備工作

1.首先需要安裝node.js，查看node.js和npm版本，若能顯示版本號說明安裝成功（附：nodejs安裝教程）

2.安裝angular腳手架

# 全局安裝 npm install -g @angular/cli

安裝完成后使用ng --version查看版本號，顯示版本號則證明安裝成功（當前版本：12.2.1）

二、命令介紹

1.創(chuàng)建項目

# 創(chuàng)建angular項目 ng new <項目名稱> # 創(chuàng)建帶有路由，樣式為less，不自動安裝依賴的angular項目，后續(xù)需要手動npm install安裝依賴 ng new <項目名稱> --routing --style=less --skip-install # 若創(chuàng)建項目時沒有使用--routing，可以使用以下命令添加根路由 ng g m app-routing --flat --module=app # 使用--createApplication=false 不會創(chuàng)建根應用，也就是不會有初始化的src目錄，包括app.component等文件 ng new <項目名稱> --createApplication=false

示例：創(chuàng)建一個名為project01的angular項目

2.創(chuàng)建組件

# 創(chuàng)建angular組件，組件名稱前面可添加路徑 ng generate component <組件名稱> # 簡寫 ng g c <組件名稱>

示例：在app目錄下的components文件夾中新建一個home組件（沒有components文件夾時會自動新建components文件夾）

ng g c components/home

3.創(chuàng)建服務

# 創(chuàng)建angular服務，服務名稱前面可添加路徑 ng generate service <服務名稱> # 簡寫 ng g s <服務名稱>

示例：在app目錄下的services文件夾中新建一個http服務（沒有services文件夾時會自動新建services文件夾）

ng g s services/http

4.創(chuàng)建模塊

# 創(chuàng)建angular模塊，模塊名稱前面可添加路徑 ng generate module <模塊名稱> # 簡寫 ng g m <模塊名稱>

示例：在app目錄下的modules文件夾中新建一個registry模塊（沒有modules文件夾時會自動新建modules文件夾）并創(chuàng)建對應的registry模塊

# 這里使用--routing 可以創(chuàng)建對應模塊的路由 ng g m modules/registry --routing # 若沒有使用--routing，可以使用以下命令添加對應模塊的路由路由 ng g m modules/registry/registry-routing --flat --module=./registry

創(chuàng)建完模塊后，可以接著創(chuàng)建對應模塊的功能點，如組件，服務等

ng g c modules/registry ng g c modules/registry/components/hello

5.常用命令總結

命令描述

ng generate <type> [options]	在項目中構建新代碼
ng g <type的首字母> [options]	簡寫

支持的類型用法

component	ng g c <組件名稱>
service	ng g s <服務名稱>
module	ng g m <模塊名稱>
pipe	ng g p <管道名稱>
directive	ng g d <指令名稱>
interface	ng g i <接口名稱>
enum	ng g e <枚舉名稱>
class	ng g c <類型名稱> （注：該命令功能與component相同）
guard	ng g g <路由守衛(wèi)名稱>
interceptor	ng g interceptor <攔截器名稱> （注：這里interceptor無法簡寫成i，因為會被識別為接口
library	ng g library <庫名稱> （注：這里名稱就是單獨的庫名稱，名稱前面無法指定路徑，且library無法簡寫）

• 構建的組件都會使用自用目錄,除非使用 --flat 單獨指定
• 構建的模塊可使用 --routing 同時創(chuàng)建對應模塊的路由

6.library命令注意事項

ng g library tables

使用library命令，會創(chuàng)建一個projects文件目錄，tables庫會出現(xiàn)在該目錄中

在angular.json文件，projects會對應增加tables庫的配置項。

newProjectRoot默認值是projects，也就是命令生成的library都會放在這個projects目錄，我們可以修改這個值，下次使用命令生成library就會對應放在我們指定的目錄中。

projectType用來區(qū)別application和library類型。

在package.json配置scripts，使用npm run build:tables命令打包對應的庫。

總結

以上是生活随笔為你收集整理的创建Angular项目及常用命令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。