好的工具使應用程序開發更快速,更容易維護,比手動完成任何事情都要方便。javascript
該角CLI是一個命令行界面工具,能夠建立一個項目,添加文件,並執行各類不斷髮展的任務,如測試,捆綁和部署。css
本指南的目標是使用Angular CLI在TypeScript中構建和運行一個簡單的Angular應用程序,同時遵照有助於每一個Angular項目的風格指南建議。html
到本章結束時,您將經過CLI瞭解開發的基本知識,併爲這些文檔樣本和實際應用程序奠基基礎。前端
你也能夠下載這個例子。java
在你作任何事情以前,你須要設置你的開發環境。node
若是Node.js®和npm不在您的機器上,請安裝Node.js®和npm。git
8.x
5.x
經過運行node -v
並npm -v
在終端/控制檯窗口中驗證您是否正在運行至少Node.js版本或更高版本以及npm版本或更高版本。舊版本會產生錯誤,但新版本能夠。github
而後在全球範圍內安裝Angular CLI。npm
content_copynpm install -g @angular/cli
打開一個終端窗口。json
經過運行如下命令生成新項目和默認應用程序:
content_copyng new my-app
Angular CLI安裝必要的npm包,建立項目文件,並用一個簡單的默認應用程序填充項目。這可能須要一些時間。
您可使用該ng add
命令將預先打包的功能添加到新項目。該ng add
命令經過在指定的包中應用原理圖來轉換項目。有關更多信息,請參閱Angular CLI文檔。
Angular Material提供典型應用佈局的示意圖。有關詳細信息,請參閱角度材料文檔。
轉到項目目錄並啓動服務器。
content_copy
該ng serve
命令啓動服務器,監視您的文件,並在您對這些文件進行更改時重建應用程序。
使用--open
(或只是-o
)選項會自動打開您的瀏覽器http://localhost:4200/
。
您的應用使用如下消息迎接您:
CLI爲您建立了第一個Angular組件。這是根組件,它被命名app-root
。你能夠找到它./src/app/app.component.ts
。
打開組件文件並將title
屬性從更改'app'
爲'My First Angular App!'
。
SRC /應用程序/ app.component.ts
content_copy
瀏覽器會自動從新加載修訂後的標題。這很好,但它可能會更好看。
打開src/app/app.component.css
並給組件一些樣式。
SRC /應用程序/ app.component.css
content_copy
看起來不錯!
這就是全部你指望在「Hello,World」應用程序中作的事情。
您已準備好參加英雄之旅教程,並構建一個小型應用程序,演示您可使用Angular建立的偉大事物。
或者,您能夠多花點時間瞭解您的全新項目中的文件。
Angular CLI項目是快速實驗和企業解決方案的基礎。
你應該檢查的第一個文件是README.md
。它有關於如何使用CLI命令的一些基本信息。不管什麼時候您想了解更多關於Angular CLI如何工做的信息,請務必訪問 Angular CLI存儲庫和 Wiki。
一些生成的文件可能對您不熟悉。
src
文件夾你的應用居住在該src
文件夾中。全部Angular組件,模板,樣式,圖像以及您應用程序須要的任何其餘內容都會轉到此處。此文件夾之外的任何文件都旨在支持構建您的應用程序。
文件 | 目的 |
---|---|
|
定義了 |
|
定義 |
|
一個文件夾,您能夠在構建應用程序時將圖像和任何其餘內容進行批量複製。 |
|
該文件夾包含每一個目標環境的一個文件,每一個文件導出用於應用程序的簡單配置變量。當您構建應用程序時,這些文件將被即時替換。您可能使用不一樣的API端點進行開發,而不是使用不一樣的API端點進行生產或使用不一樣的分析令牌。你甚至可使用一些模擬服務。不管哪一種方式,CLI都涵蓋了你。 |
|
用於在不一樣前端工具之間共享目標瀏覽器的配置文件。 |
|
每一個網站都但願在書籤欄上看起來不錯。開始使用您本身的Angular圖標。 |
|
當有人訪問您的網站時提供的主要HTML頁面。大多數狀況下,你永遠不須要編輯它。CLI 在構建應用程序時自動添加全部文件 |
|
運行時使用 的Karma測試運行器的單元測試配置 |
|
您的應用的主要入口點。使用JIT編譯器編譯應用程序 並引導應用程序的根模塊( |
|
不一樣的瀏覽器對Web標準有不一樣程度的支持。Polyfills有助於使這些差別正常化。你應該對很是安全的 |
|
你的全球風格在這裏。大多數狀況下,您須要在組件中使用本地樣式以便於維護,但影響全部應用程序的樣式須要位於中心位置。 |
|
這是你的單元測試的主要入口點。它有一些可能不熟悉的自定義配置,但它不是你須要編輯的東西。 |
|
用於Angular app( |
|
TSLint和 Codelyzer的 其餘Linting配置,在運行時使用 |
該src/
文件夾只是項目根文件夾內的項目之一。其餘文件可幫助您構建,測試,維護,記錄和部署應用程序。這些文件放在旁邊的根文件夾中src/
。
文件 | 目的 |
---|---|
|
內部 |
|
|
|
編輯器的簡單配置,以確保使用您的項目的每一個人都具備相同的基本配置。大多數編輯支持一個 |
|
Git配置以確保自動生成的文件未提交到源代碼管理。 |
|
Angular CLI的配置。在這個文件中,您能夠設置多個默認值,並配置項目生成時包含的文件。若是您想了解更多信息,請查看官方文檔。 |
|
|
|
量角器 的端到端測試配置,在運行時使用 |
|
您的項目的基本文檔,預填充CLI命令信息。確保使用項目文檔對其進行加強,以便任何檢查回購的人均可以構建您的應用程序! |
|
TypeScript編譯器配置爲您的IDE選擇併爲您提供有用的工具。 |
|