Angular #3 Angular-CLI

江崑成 2017/12/30 12:38:39
423

Angular #3 Angular-CLI


簡介

本篇將說明如何透過 Angular Cli 來協助我們處理一般瑣碎的事情

作者

江崑成


前言

透過 Angular Cli 的幫助,可以協助我們依照整個網站的 SiteMap,快速的來建立相關的模組及元件,並且一切的命名規則均是依照 Angular 官方建議,讓開發人員可以專注在頁面的開發上,而不是在建立繁複的建立檔案。


安裝 Angular Cli

 透過 npm 安裝 Angular Cli 指令如下:

npm install -g @angular/cli@latest

 


Angular Cli 相關指令

當安裝好 Angular Cli 後,我們就可以透過  ng  這個指令來進行許多動作,接下來會介紹幾個基本指令。


ng --help 或 ng

ng -- help 會列出所有可以使用的指令,不過這通常是已經很熟指令,想直接查詢細部設定時使用。

初學或是不熟指令的可以透過下列的文件,會比較快上手。

 


ng new (建立 angular 專案)

接下來我們先來看一下 ng new 的一些細部可用參數
 
 
透過  ng new  建立一個最基本的 Angular 專案
 
 
透過  ng new --routing  建立一個最基本的 Angular 專案(含 Routing)
 


ng generate 或 ng g 自動建立

Angular Cli 提供下列指令,讓我們可以很方便快速的建立 Component、Module、Service ...等相關檔案

 


ng g module 或 ng g m 建立模組

PS:可加入 --routing 以自動建立 routing 檔案
 
PS:可加入 -m=app 以自動將 Mr2Module Module 註冊到 AppModule
 


ng g component 或 ng g c 建立元件

PS:這邊就不用加 -m 囉,現在 cli 已經會自動將 Component 註冊到該 Module 下
 


ng g service 或 ng g s 建立 Service

PS:可加入 -m=mr1 以自動將 Service2Servic 註冊到 Mr1Module
 
江崑成