augular入門

好的工具使應用程序開發更快速,更容易維護,比手動完成任何事情都要方便。javascript

角CLI是一個命令行界面工具,能夠建立一個項目,添加文件,並執行各類不斷髮展的任務,如測試,捆綁和部署。css

本指南的目標是使用Angular CLI在TypeScript中構建和運行一個簡單的Angular應用程序,同時遵照有助於每一個Angular項目的風格指南建議。html

到本章結束時,您將經過CLI瞭解開發的基本知識,併爲這些文檔樣本和實際應用程序奠基基礎。前端

你也能夠下載這個例子。java

第1步。設置開發環境 

在你作任何事情以前,你須要設置你的開發環境。node

若是Node.js®和npm不在您的機器上,請安裝Node.js®和npmgit

8.x5.x 經過運行node -vnpm -v在終端/控制檯窗口中驗證您是否正在運行至少Node.js版本或更高版本以及npm版本或更高版本。舊版本會產生錯誤,但新版本能夠。github

而後在全球範圍內安裝Angular CLInpm

content_copynpm install -g @angular/cli

第2步。建立一個新的項目 

打開一個終端窗口。json

經過運行如下命令生成新項目和默認應用程序:

content_copyng new my-app

Angular CLI安裝必要的npm包,建立項目文件,並用一個簡單的默認應用程序填充項目。這可能須要一些時間。

您可使用該ng add命令將預先打包的功能添加到新項目。該ng add命令經過在指定的包中應用原理圖來轉換項目。有關更多信息,請參閱Angular CLI文檔。

Angular Material提供典型應用佈局的示意圖。有關詳細信息,請參閱角度材料文檔

第3步:服務應用程序 

轉到項目目錄並啓動服務器。

content_copy
  1.  
    cd my-app
  2.  
    ng serve --open

ng serve命令啓動服務器,監視您的文件,並在您對這些文件進行更改時重建應用程序。

使用--open(或只是-o)選項會自動打開您的瀏覽器http://localhost:4200/

您的應用使用如下消息迎接您:

該應用程序工做!

第4步:編輯您的第一個Angular組件 

CLI爲您建立了第一個Angular組件。這是根組件,它被命名app-root。你能夠找到它./src/app/app.component.ts

打開組件文件並將title屬性從更改'app''My First Angular App!'

SRC /應用程序/ app.component.ts

content_copy
  1.  
    export class AppComponent {
  2.  
    title = 'My First Angular App!';
  3.  
    }

瀏覽器會自動從新加載修訂後的標題。這很好,但它可能會更好看。

打開src/app/app.component.css並給組件一些樣式。

SRC /應用程序/ app.component.css

content_copy
  1.  
    h1 {
  2.  
    color: #369;
  3.  
    font-family: Arial, Helvetica, sans-serif;
  4.  
    font-size: 250%;
  5.  
    }

QuickStart應用的輸出

看起來不錯!

下一步是什麼?

這就是全部你指望在「Hello,World」應用程序中作的事情。

您已準備好參加英雄旅教程,並構建一個小型應用程序,演示您可使用Angular建立的偉大事物。

或者,您能夠多花點時間瞭解您的全新項目中的文件。

項目文件審查

Angular CLI項目是快速實驗和企業解決方案的基礎。

你應該檢查的第一個文件是README.md。它有關於如何使用CLI命令的一些基本信息。不管什麼時候您想了解更多關於Angular CLI如何工做的信息,請務必訪問 Angular CLI存儲庫和 Wiki

一些生成的文件可能對您不熟悉。

src文件夾

你的應用居住在該src文件夾中。全部Angular組件,模板,樣式,圖像以及您應用程序須要的任何其餘內容都會轉到此處。此文件夾之外的任何文件都旨在支持構建您的應用程序。

SRC
應用
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
資產
.gitkeep
環境
environment.prod.ts
environment.ts
browserslist
favicon.ico的
的index.html
karma.conf.js
main.ts
polyfills.ts
styles.css的
test.ts
tsconfig.app.json
tsconfig.spec.json
tslint.json
文件 目的

app/app.component.{ts,html,css,spec.ts}

定義了AppComponent一個HTML模板,CSS樣式表和一個單元測試。隨着應用程序的發展,它將成爲嵌套組件樹的根組件。

app/app.module.ts

定義AppModule,告訴Angular如何組裝應用程序的根模塊。如今它只聲明瞭AppComponent。很快就會有更多的組件須要聲明。

assets/*

一個文件夾,您能夠在構建應用程序時將圖像和任何其餘內容進行批量複製。

environments/*

該文件夾包含每一個目標環境的一個文件,每一個文件導出用於應用程序的簡單配置變量。當您構建應用程序時,這些文件將被即時替換。您可能使用不一樣的API端點進行開發,而不是使用不一樣的API端點進行生產或使用不一樣的分析令牌。你甚至可使用一些模擬服務。不管哪一種方式,CLI都涵蓋了你。

browserslist

用於在不一樣前端工具之間共享目標瀏覽器的配置文件。

favicon.ico

每一個網站都但願在書籤欄上看起來不錯。開始使用您本身的Angular圖標。

index.html

當有人訪問您的網站時提供的主要HTML頁面。大多數狀況下,你永遠不須要編輯它。CLI 在構建應用程序時自動添加全部文件jscss文件,所以您無需手動添加任何<script><link>標籤。

karma.conf.js

運行時使用 的Karma測試運行器的單元測試配置ng test

main.ts

您的應用的主要入口點。使用JIT編譯器編譯應用程序 並引導應用程序的根模塊(AppModule)在瀏覽器中運行。您還可使用AOT編譯器, 而無需經過將--aot標誌附加到ng buildng serve命令來更改任何代碼。

polyfills.ts

不一樣的瀏覽器對Web標準有不一樣程度的支持。Polyfills有助於使這些差別正常化。你應該對很是安全的core-jszone.js,但必定要檢查出的瀏覽器支持指南獲取更多信息。

styles.css

你的全球風格在這裏。大多數狀況下,您須要在組件中使用本地樣式以便於維護,但影響全部應用程序的樣式須要位於中心位置。

test.ts

這是你的單元測試的主要入口點。它有一些可能不熟悉的自定義配置,但它不是你須要編輯的東西。

tsconfig.{app|spec}.json

用於Angular app(tsconfig.app.json)和單元測試(tsconfig.spec.json)的TypeScript編譯器配置。

tslint.json

TSLint和 Codelyzer的 其餘Linting配置,在運行時使用ng lint。Linting有助於保持代碼風格的一致性。

根文件夾

src/文件夾只是項目根文件夾內的項目之一。其餘文件可幫助您構建,測試,維護,記錄和部署應用程序。這些文件放在旁邊的根文件夾中src/

個人應用程序內
E2E
SRC
app.e2e-spec.ts
app.po.ts
tsconfig.e2e.json
protractor.conf.js
node_modules / ...
SRC / ...
karma.conf.js
.editorconfig
的.gitignore
angular.json
的package.json
README.md
tsconfig.json
tslint.json
文件 目的

e2e/

內部e2e/進行端到端測試。他們不該該在裏面,src/由於e2e測試真的是一個單獨的應用程序,只是碰巧測試你的主應用程序。這也是他們擁有本身的緣由tsconfig.e2e.json

node_modules/

Node.js建立該文件夾並將全部第三方模塊列入 package.json其中。

.editorconfig

編輯器的簡單配置,以確保使用您的項目的每一個人都具備相同的基本配置。大多數編輯支持一個.editorconfig文件。有關更多信息,請參閱http://editorconfig.org

.gitignore

Git配置以確保自動生成的文件未提交到源代碼管理。

angular.json

Angular CLI的配置。在這個文件中,您能夠設置多個默認值,並配置項目生成時包含的文件。若是您想了解更多信息,請查看官方文檔。

package.json

npm配置列出您的項目使用的第三方軟件包。您也能夠在這裏添加您本身的自定義腳本

protractor.conf.js

量角器 的端到端測試配置,在運行時使用ng e2e

README.md

您的項目的基本文檔,預填充CLI命令信息。確保使用項目文檔對其進行加強,以便任何檢查回購的人均可以構建您的應用程序!

tsconfig.json

TypeScript編譯器配置爲您的IDE選擇併爲您提供有用的工具。

tslint.json

掉毛配置TSLint連同 Codelyzer,用於在運行時ng lint。Linting有助於保持代碼風格的一致性。

相關文章
相關標籤/搜索