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

来源:https://www.cnblogs.com/danvic712/archive/2020/02/14/getting-started-with-angular.html

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


一、Overview

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

對應官方文檔地址:

配套代碼地址: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 來告訴項目中的各種前端工具,完成自動配置的過程

您的分享是我們最大的動力!

更多相關文章
  • 在無序列表ul>li中,無線列表的標誌是出現在各列表前面的圓點。在有序列表ol>li中,前面預設帶有數字,如何修改列表前面的項目符號,只需要通過list-style調整就好,常見的符號有(/*內容註釋部分*/)list-style-type:circle;/*空心圓*/list-style:none... ...
  • 常見的color, font-family, background 等css屬性都能夠設置鏈接的樣式,a鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。a標簽與人交互的4個狀態屬於偽類狀態切換,常見的鏈接四種狀態為:a:link - 普通的、未被訪問的鏈接a:visited - 用戶已訪問的... ...
  • CSS文本屬性可定義文本的外觀,這是毫無疑問的,其次css可以通過以下屬性改變文字的排版,比方說letter-spacing實現字元間距text-indent: 2em;完成首行縮進2字元word-spacing改變了文字的間距,direction改變文本從左至右的閱讀順序,white-space處... ...
  • 對象的遍歷 對象可以當做數組處理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=function(){ alert(this.name+" "+this.age); } for(var i in pers ...
  • 前次用 electron-packager 打包成功,這次改用 electron-builder 打包,然後根據項目中實際需要進行選擇使用。 第一步:全局安裝 electron-builder,便於系統通用 npm install -g electron-builder 或 cnpm install ...
  • CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)font-family控制字體,由於各個電腦系統安裝的字體不盡相同,但是基本裝有黑體、宋體與微軟雅黑這三款字體,通常這樣寫font-family:"黑體", "宋體","Microsoft YaHei" font-... ...
  • jQuery初學者筆記 一 Mirror王宇陽 by jQuery語法 jQuery語法是通過選取HTML元素,並對選取的元素進行操作 基礎語法: 所有jQuery語句用“$”符號開始 jQuery函數位於一個document ready函數中,我們需要在js中載入該函數文檔 選擇器語法: jQue ...
  • JavaScript中的基本數據類型 在JS中,有6種基本數據類型: 1. string 2. number 3. boolean 4. null 5. undefined 6. Symbol(ES6) 除去這六種基本數據類型以外,其他的所有變數數據類型都是Object。基本類型的操作在JS底層中是 ...
一周排行
  • 一、引言 按照專用隊列解釋: MachineName\Private$\QueueName,只針對於本機的程式才可以調用的隊列,有些情況下為了安全起見定義為私有隊列。所以剛開始的時候認為,要想訪問遠程消息隊列,只能使用公共隊列。但是後來發現,公共隊列依賴Domain Controller(域控),在 ...
  • 本文只對api介面,header請求參數進行簡單驗證,起到拋磚引玉使用,需要深入驗證,請自行擴展 項目目錄結構如圖 中間件類 using ApiMiddleware.Common.DataEnityModel; using ApiMiddleware.Common.DbContext; using ...
  • 前言:由於公司占時沒有運維,出於微服務的需要,Apollo只能先裝在windows 阿裡雲上跑起來,由於環境及網路等問題,在安裝過程中遇到很多坑,算是一個個坑填完後,最終實現。 一. java jdk環境 java jdk 1.8下載地址: https://www.oracle.com/java/t ...
  • 前言 nuget 是 .net 的常用包管理器,目前已經內置到 Visual Studio 2012 以後的版本。大多數 .net 包都托管在 nuget.org,包括 .net core 框架基礎包,得益於 .net core 的模塊化設計,很多非核心包都可以進行一定程度的獨立升級。 製作並上傳 ...
  • 簡單的介紹一下集合,通俗來講就是用來保管多個數據的方案。比如說我們是一個公司的倉庫管理,公司有一堆貨物需要管理,有同類的,有不同類的,總而言之就是很多、很亂。我們對照集合的概念對倉庫進行管理的話,那麼 數組就是將一堆貨整整齊齊的碼在倉庫的某個地方,普通列表也是如此;Set就是在倉庫里有這麼一個貨架, ...
  • 中間件分類 ASP.NET Core 中間件的配置方法可以分為以上三種,對應的Helper方法分別是:Run(), Use(), Map()。 Run(),使用Run調用中間件的時候,會直接返回一個響應,所以後續的中間件將不會被執行了。 Use(),它會對請求做一些工作或處理,例如添加一些請求的上下 ...
  • 字元串的常用操作 很好理解 字元串可以用 ' + ' 連接,或者乘一個常數重覆輸出字元串 字元串的索引操作 通過一對中括弧可以找到字元串中的某個字元 可以通過正負數雙向操作噢 用一個中括弧來實現 為什麼沒有-0??去清醒腦子想想 -0 和 0 有差嗎? 還有一個切片操作 就像切菜那樣簡單,同樣是中括 ...
  • title: Java基礎語法(3) 運算符 blog: "CSDN" data: "Java學習路線及視頻" 1.算術運算符 算術運算符的註意問題 如果對負數取模,可以把模數負號忽略不記,如:5% 2=1。 但被模數是負數則不可忽略。此外,取模運算的結果不一定總是整數。 對於除號“/”,它的整數除 ...
  • 下麵是互相轉換的代碼: 有想要瞭解更多關於python知識的請在下方評論或私信小編 ...
  • 引言 構建分散式系統並不容易。然而,人們日常所使用的應用大多基於分散式系統,在短時間內依賴於分散式系統的現狀並不會改變。ApacheZooKeeper旨在減輕構建健壯的分散式系統的任務。ZooKeeper基於 分散式計算的核心概念而設計,主要目的是給開發人員提供一套容易理解和開發的介面,從而簡化分佈 ...
x