Angular2入門體驗

好的工具每每使得開發應用更快更簡單，而不是任何模塊都手動開發。angualr cli就是一個支持 建立工程，添加文件，對各類任務如測試、打包、部署等迭代。

本文的目的就是基於TypeScript開發構建一個angualr應用，使用angualr cli能夠選擇工程的風格。

在本章的 末尾，你能夠理解CLI的開發以及開發完整應用的樣例。

也能夠經過這個連接直接下載源碼。

第一步，配置環境變量

在開始開發前，須要安裝nodejs。

點擊這個網址,Nodejs安裝文件下載

在命令行中，執行：

sudo npm install -g @angular/cli

注意執行命令的權限，不然會提示沒法寫入文件異常。

第二步，建立新工程

打開命令行，建立一個新的工程框架：

ng new my-app

建立工程須要花點時間，稍等一會就好了。

第三步，啓動應用

在項目目錄，執行命令：

cd my-app
ng serve --open

ng serve會啓動服務器，監控文件，當修改的時候重啓應用。 使用--open 選項會自動開啓瀏覽器並訪問http://localhost:4200

能夠看到下面的信息：

第四步，編輯angular組件

cli建立了angualr組件，應用組件被命名爲app=root,能夠在./src/app/app,component.ts中看到。打開文件，修改：

src/app/app.component.ts

export class AppComponent {
  title = 'My First Angular App!';
}

瀏覽器會自動加載從新顯示標題。看起來還不錯，不過能夠在優化一下。 打開src/app/app.component.css設置樣式

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

看起來就不錯了。

項目文件

首先能夠關注下readme.md，它裏面包含了cli的基本操做。

更多信息能夠參考：

• angular cli github

src目錄

應用全部的內容都在src目錄中，包括組件、模板、樣式、圖片或者任何app須要的東西。在src以外的內容都被認爲是支持app構建的資源。

src
.
├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules
│   ├──...
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   ├── assets
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

app目錄

file	做用
app/app.component.{ts,html,css,spec.ts}	經過html模板定義app，是應用基礎組件
app/app.module.ts	描述如何定義應用
assets/*	用來放置圖片和部署應用時須要的資源
environments/*	配置信息
favicon.ico	網站圖標
index.html	主要的html文件，通常時候不須要修改。CLI會自動添加js和css資源
main.ts	應用的主要入口，基於JIT編譯應用，並在瀏覽器中運行。
polyfills.ts	瀏覽器支持標準相關
styles.css	樣式文件
test.ts	單元測試
tsconfig.{app	spec}.json

root目錄

src目錄下包含了工程內部的內容，其餘的文件則幫助測試、支持、文檔、發佈應用。

file	做用
e2e	裏面包含了點對點的測試文件
node_modules	依賴的資源，基於package.json管理
.angular-cli.json	cli的配置文件
.editorconfig	編輯器配置
.gitignore	git忽略的文件
karma.conf.js	karma test 單元測試
package.json	npm管理的第三方組件
protractor.conf.js	Protractor測試配置文件
readme.md	工程基本的信息
tsconfig.json	TypeScript編譯配置
tslint.json	TSLint配置