1. 程式人生 > >Angular 從入坑到挖坑 - Angular 使用入門

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

4.1、通過 Angular CLI 建立第一個 Angular 應用

4.1.1、開發環境搭建

前提條件

  • 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

4.1.2、執行第一個 Angular 應用

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

## 指定位置,建立新的 angular 應用
ng new my-app

常用命令引數

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

執行專案

## 執行專案
ng serve

常用命令引數

options解釋
--open / -o 是否直接開啟瀏覽器
--port 指定程式執行的埠

 

4.2、專案結構、檔案功能瞭解

  • 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 配置檔案


1 工作空間類似於 .NET 專案中的解決方案,在一個工作空間內可以建立多個的專案↩ 2 現代瀏覽器支援的某些原生 API,當用戶使用老版本的瀏覽器或某些瀏覽器時並不支援,只要使用了 polyfills 這個庫, 即可對於這些無法使用的瀏覽器新增支援,使用方法也無需更改(PS:針對的是原生的 API)↩ 3 還是因為不同瀏覽器支援的特性不同,或者是 css 樣式字首不同,通過 browserslist 來告訴專案中的各種前端工具,完成自動配置的過程↩