Angular 從入坑到挖坑 - Angular 使用入門

Overview

angular 入坑記錄的筆記第一篇，完成開發環境的搭建，以及如何經過 angular cli 來建立第一個 angular 應用。入坑一個多星期，經過學習官方文檔以及手摸手的按教程敲官方的快速上手項目，很像後端，嗯，完美的契合了我這種後端開發人員。

對應官方文檔地址：

• 搭建本地開發環境和工做空間
• ng new
• ng serve
• 工做區和項目文件結構

配套代碼地址：angular-practice/src/getting-started

Contents

1. Angular 從入坑到棄坑 - Angular 使用入門

Knowledge Graph

Step by Step

經過 Angular CLI 建立第一個 Angular 應用

開發環境搭建

前提條件

• node.js 版本高於 10.9.0
• 包含 npm 客戶端

## 查看 node 版本
node -v
 ## 查看 npm 版本
npm -v
複製代碼

全局安裝 Angular CLI

## 在電腦上以全局安裝的方式安裝 angular cli
npm install -g @angular/cli
複製代碼

驗證是否安裝成功

## 查看 angular cli 版本
ng v
 ## 查看 angular cli 中的各類命令解釋
ng help
複製代碼

運行第一個 Angular 應用

經過 Angular CLI 命令來建立一個新的應用

## 指定位置，建立新的 angular 應用
ng new my-app
複製代碼

經常使用命令參數

options	解釋
--force	強制覆蓋現有文件
--skipInstall	建立項目時跳過 npm install 命令
--strict	在代碼中使用更嚴格的 typescript 編譯選項

運行項目

## 運行項目
ng serve
複製代碼

經常使用命令參數

options	解釋
--open / -o	是否直接打開瀏覽器
--port	指定程序運行的端口

項目結構、文件功能瞭解

• e2e - 端到端測試文件

  • src - 單元測試源代碼路徑
    • app.e2e-spec.ts - 針對當前應用的端到端單元測試文件
    • app.po.ts - 單元測試源文件
  • protractor.conf.js - protractor 測試工具配置文件
  • tsconfig.json - 繼承於工做空間根目錄的 typescript 配置文件

• src - 工做空間 ^[1] 最外層根項目的源代碼路徑

  • app - 系統所提供的各類功能
    • app-routing.module.ts - 項目的路由模塊，用來定義項目的前端路由信息
    • app.component.html - 項目的根組件所關聯的 HTML 頁面
    • app.component.scss - 項目的根組件 HTML 頁面的樣式信息
    • app.component.spec.ts - 項目的根組件單元測試文件
    • app.component.ts - 項目的根組件邏輯
    • app.module.ts - 應用的根模塊
  • assets - 系統須要使用的靜態資源文件
  • environments - 針對不一樣環境的構建配置選項
  • favicon.ico - 網站圖標
  • index.html - 應用的主頁面
  • main.ts - 應用的入口程序
  • polyfills.ts - 針對不一樣瀏覽器對於原生 API 的支持程度不相同的狀況，用來抹平不一樣瀏覽器之間的支持差別 ^[2]
  • styles.scss - 項目的全局樣式文件
  • test.ts - 單元測試的主入口程序

• .editorconfig - 針對不一樣代碼編輯器間的代碼風格規範

• .gitignore - git 忽略的文件

• angular.json - 應用於當前工做空間的一些默認配置以及供 angular cli 和開發工具使用的配置信息

• browserslist - 項目所針對的目標瀏覽器 ^[3]

• karma.conf.js - 基於 node.js 的 javascript 測試執行過程管理工具

• package-lock.json - 針對當前工做空間使用到 npm 包，安裝到 node_modules 時的版本信息

• package.json - 當前工做空間中全部項目會使用到的 npm 包依賴

• README.md - 當前工做空間最外層根應用的簡介文件

• tsconfig.app.json - 當前工做空間最外層根應用的專屬 typescript 配置文件

• tsconfig.json - 當前工做空間中各個項目的基礎 typescript 配置文件

• tsconfig.spec.json - 當前工做空間最外層根應用的專屬 tslint 配置文件

• tslint.json - 當前工做空間中各個項目的基礎 tslint 配置文件

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712

---

1. 工做空間相似於 .NET 項目中的解決方案，在一個工做空間內能夠建立多個的項目 ↩︎

2. 現代瀏覽器支持的某些原生 API，當用戶使用老版本的瀏覽器或某些瀏覽器時並不支持，只要使用了 polyfills 這個庫， 便可對於這些沒法使用的瀏覽器添加支持，使用方法也無需更改（PS：針對的是原生的 API） ↩︎

3. 仍是由於不一樣瀏覽器支持的特性不一樣，或者是 css 樣式前綴不一樣，經過 browserslist 來告訴項目中的各類前端工具，完成自動配置的過程 ↩︎