首頁 > 文章 > web前端 > Angular開發實務（一）：環境準備及框架搭建

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

不言原創: 2018-04-02 14:43:092082瀏覽

這篇文章給大家介紹了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開發實務（一）：環境準備及框架搭建

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組件、模板、樣式、圖片以及應用程式所需的任何東西都在這裡。這個資料夾之外的檔案都是為建置應用程式提供支援用的。 ##################這個資料夾下放置應用級資料模型這個資料夾下放置應用中的各個頁面，這裡面的目錄結構和assets/*environments/*#favicon.icohmr.tsmain.tsindex.html

檔案	用途
`#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/*##這個資料夾下放置應用程式級通用服務
這個資料夾下你可以放字體、圖片等任何靜態文件，在建置應用程式時，它們全都會拷貝到發布包中
這個資料夾中包含為各個目標環境準備的文件，它們導出了一些應用中要用到的配置變數。這些文件會在建置應用程式時被替換。例如你可能在開發環境、測試環境及生產環境中使用不同的後端API位址
顯示在書籤欄中的網站圖示
HMR的啟動器，將在	中使用來啟動應用程式
網站的主頁。大多數情況下你都不用編輯它。在建立應用程式時，CLI會自動把所有js和css檔案加進去，所以你不必在這裡手動加入任何