文章出處

引言

在工作中引入Angular框架將近一年了，在這一年中不斷的踩坑和填坑，當然也學習和積累了很多的知識，包括MVVM框架、前后端分離、前端工程化、SPA優化等等。因此想通過Angular開發實踐這系列的文章分享下自己的所學，達到交流和分享的目的。

介紹之前，我假定你了解或者熟悉：

環境準備

全局安裝NodeJs（>6.9.x），包含npm（>3.x.x）
全局安裝angular-cli

npm install -g @angular/cli

IDE推薦使用WebStorm

框架搭建

angular-start是我在GitHub上維護的一個起步項目，你可以直接下載作為基礎開發框架來使用。

你可以通過以下幾步快速啟動并進行開發：

git clone https://github.com/laixiangran/angular-start.git
cd angular-start
npm install（等待依賴包安裝完成，再進行下一步）
npm start

為了啟動方便，在package.json的scripts配置了"start": "ng serve --hmr -o --proxy-config proxy.config.json"，可以看到這條命令分別配置了--hmr（啟動模塊熱更新）、-o（自動打開瀏覽器）、--proxy-config（代理配置）

控制臺信息：

瀏覽器界面：

項目啟動成功了，你可以進行下面的開發了。可能你還想了解下該項目中的文件都是干什么用的，那么我們就來了解下。

項目文件概覽

src文件夾

應用代碼位于src文件夾中。所有的Angular組件、模板、樣式、圖片以及應用所需的任何東西都在這里。這個文件夾之外的文件都是為構建應用提供支持用的。

src目錄

文件	用途
`app/app.component.{ts,html,css,spec.ts}`	使用HTML模板、CSS樣式和單元測試定義`AppComponent`組件。它是根組件，隨著應用的成長它會成為一棵組件樹的根節點。
`app/app.module.ts`	定義`AppModule`，這個根模塊會告訴Angular如何組裝該應用
`app/app.routes.ts`	該模塊配置了應用的根路由
`app/components/*`	這個文件夾下放置應用級通用組件
`app/models/*`	這個文件夾下放置應用級數據模型
`app/pages/*`	這個文件夾下放置應用中的各個頁面，這里面的目錄結構和`app/`一致
`app/services/*`	這個文件夾下放置應用級通用服務
`assets/*`	這個文件夾下你可以放字體、圖片等任何靜態文件，在構建應用時，它們全都會拷貝到發布包中
`environments/*`	這個文件夾中包括為各個目標環境準備的文件，它們導出了一些應用中要用到的配置變量。這些文件會在構建應用時被替換。比如你可能在開發環境、測試環境及生產環境中使用不同的后端API地址
`favicon.ico`	顯示在書簽欄中的網站圖標
`hmr.ts`	HMR的啟動器，將在`main.ts`中用來起動應用
`index.html`	網站的主頁面。大多數情況下你都不用編輯它。在構建應用時，CLI會自動把所有js和css文件添加進去，所以你不必在這里手動添加任何`<script>`或`<link>`標簽
`main.ts`	這是應用的主要入口點。使用JIT compiler或者AOT compiler編譯器編譯本應用，并啟動應用的根模塊AppModule（啟用HMR時，將使用`hmr.ts`定義的啟動器啟動），使其運行在瀏覽器中
`polyfills.ts`	不同的瀏覽器對Web標準的支持程度也不同。填充庫（polyfill）能幫我們把這些不同點進行標準化。你只要使用core-js 和 zone.js通常就夠了，不過你也可以查看瀏覽器支持指南以了解更多信息
`styles.scss`	這里是你的全局樣式。大多數情況下，你會希望在組件中使用局部樣式，以利于維護，不過那些會影響你整個應用的樣式你還是需要集中存放在這里
`test.ts`	這是單元測試的主要入口點。它有一些你不熟悉的自定義配置，不過你并不需要編輯這里的任何東西
`tsconfig.{app、spec}.json`	TypeScript編譯器的配置文件。`tsconfig.app.json`是為Angular應用準備的，而`tsconfig.spec.json`是為單元測試準備的
`typings.d.ts`	引用的第三方插件TypeScript編譯器可能不識別，需要通過下載`@types/xxx`獲取該庫的類型定義文件，如果`@types`沒有那么就需要在該文件中定義，如`declare var $: any;`

根目錄

src/文件夾是項目的根文件夾之一。其它文件是用來幫助我們構建、測試、維護、文檔化和發布應用的。它們放在根目錄下，和src/平級。

根目錄

文件	用途
`e2e/*`	在`e2e/`下是端到端（end-to-end）測試。它們不在`src/`下，是因為端到端測試實際上和應用是相互獨立的，它只適用于測試你的應用而已。這也就是為什么它會擁有自己的`tsconfig.json`
`node_modules/*`	`Node.js`創建了這個文件夾，并且把`package.json`中列舉的所有第三方模塊都放在其中
`.angular-cli.json`	Angular CLI的配置文件。在這個文件中，我們可以設置一系列默認值，還可以配置項目編譯時要包含的那些文件。要了解更多，請參閱它的官方文檔
`.editorconfig`	用來確保參與你項目的每個人都具有基本的編輯器配置。大多數的編輯器都支持`.editorconfig`文件，詳情參見 http://editorconfig.org
`..gitignore`	Git的配置文件，用來確保某些自動生成的文件不會被提交到源碼控制系統中（GitHub）
`.stylelintrc.json`	css代碼規范檢測的配置文件
`CHANGELOG.md`	項目的日志文件
`karma.conf.js`	Karma的單元測試配置，當運行`ng test`時會用到它
`LICENSE`	版權文件
`package.json`	`npm`配置文件，其中列出了項目使用到的第三方依賴包。你還可以在這里添加自己的自定義腳本
`protractor.conf.js`	Protractor的端到端測試配置文件，當運行`ng e2e`的時候會用到它
`proxy.config.json`	`ng serve`的代理配置文件，主要用在開發時前后端分離出現的跨域問題
`README.md`	項目的基礎說明文檔，包括項目基本信息、如何啟動、構建項目等等信息
`tsconfig.json`	TypeScript編譯器的配置，你的IDE會借助它來給你提供更好的幫助
`tslint.json`	TSLint和Codelyzer的配置信息，當運行`ng lint`時會用到。Lint功能可以幫你保持代碼風格的統一