Angular開發實踐（一）：環境準備及框架搭建

引言

在工做中引入Angular框架將近一年了，在這一年中不斷的踩坑和填坑，固然也學習和積累了不少的知識，包括MVVM框架、先後端分離、前端工程化、SPA優化等等。所以想經過Angular開發實踐這系列的文章分享下本身的所學，達到交流和分享的目的。

介紹以前，我假定你瞭解或者熟悉：

• NodeJs

• Npm

• Git

• Sass

• TypeScript

• angular-cli

環境準備

• 全局安裝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組件、模板、樣式、圖片以及應用所需的任何東西都在這裏。這個文件夾以外的文件都是爲構建應用提供支持用的。

文件	用途
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功能能夠幫你保持代碼風格的統一