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

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

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1403175
• 
  php入門教程之一週學會PHP

  4231163
• 
  JAVA 初級入門影片教學

  2418534
• 
  小甲魚零基礎入門學習Python影片教學

  498170
• 
  PHP 零基礎入門教學

  834004

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1403175次學習
• 
  JAVA 初級入門影片教學

  2418534次學習
• 
  小甲魚零基礎入門學習Python影片教學

  498170次學習
• 
  Web前端開發極速入門

  214174次學習
• 
  零基礎精通 PS 影片教學

  858920次學習

• 
  【web前端】Node.js快速入門

  4674次學習
• 
  國外Web開發全端課程全集

  3620次學習
• 
  Go語言實戰之 GraphQL

  3114次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  559次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  16093次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

關於我們 免責聲明 Sitemap

PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！

檔案	用途
#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檔案加進去，所以你不必在這裡手動加入任何