iT邦幫忙

angular相關文章
共有 756 則文章
鐵人賽 Modern Web DAY 23
angular專案開發指南 系列 第 23

技術 Angular 路由模組

前言 路由是 Angular 裡很重要的部分,以前的網頁技術 MPA 透過改變 url 對 server 發起頁面需求來達到換頁的效果,而所謂的 SPA 單頁應...

鐵人賽 Modern Web DAY 19
angular專案開發指南 系列 第 19

技術 製作共用指令與管道

前言 Angular 雖然內建許多的指令 @Directive 與管道 @Pipe,但專案開始進行後,就難免遇到需要自訂一些服務的時候,針對一些可以共用的方法或...

鐵人賽 Modern Web DAY 18
angular專案開發指南 系列 第 18

技術 Angular 組件間資料的傳遞方式

前言 所有前端框架都會遇到一個共同的問題,就是資料與狀態如何在組件之間傳遞,根據元件之間不同的組合關係,大致可分類為父子,兄弟與沒有關係,在 Angular 中...

鐵人賽 Modern Web DAY 17
angular專案開發指南 系列 第 17

技術 Angular 專業圖表套件 - Ngx-Echarts

前言 回到網站的首頁,為了量化租戶管理的效能,通常會將資料數據透過圖表的方式呈現,在網路上可以找到許多套件與 Angular 搭配完成各種任務,今天要跟大家介紹...

鐵人賽 Modern Web DAY 16
angular專案開發指南 系列 第 16

技術 Angular 元件的生命週期

前言 回到基本的概念,今天來討論一下 Angular Lifecycle Hooks,雖然前面我們已經實作了租戶管理元件,但是對於 Angular 元件基本的生...

鐵人賽 自我挑戰組 DAY 15

技術 [Day15] 2022三大前端框架庫,使用量排行誰勝出(Angular/React/Vue)?

今天主題提到2022三大前端開發框架使用量排行誰勝出?先來張在Stack Overflow自 2008 年成立以來,基於標籤使用情況的技術隨時間推移的趨勢,就可...

鐵人賽 Modern Web DAY 26
【每天5分鐘】學前端 系列 第 26

技術 Day26【每天5分鐘】學前端 | 前端三大框架

JavaScript 的內容有很多,【每天 5 分鐘】的介紹,不知道要寫到什麼時候 XD這幾天很掙扎,在 30 天的鐵人賽中, JS 的部分 要介紹到哪邊為止?...

鐵人賽 Modern Web DAY 20
angular專案開發指南 系列 第 20

技術 i18n 多國語系 - Ngx-Translate

前言 國際化 (i18n) 是一個過程,用於對你的應用進行設計和準備以便在全球不同地區使用。本地化是指為不同的本地環境建構應用版本的過程,包括提取用於翻譯成不同...

鐵人賽 Modern Web DAY 28
angular專案開發指南 系列 第 28

技術 Gitlab工作流程介紹

前言 GitLab 最初是 MIT 授權的免費開源軟體。現在則有 GitLab CE(社群版) 和 GitLab EE(企業版),而兩者的核心程式碼是相同的,但...

鐵人賽 Modern Web DAY 29
angular專案開發指南 系列 第 29

技術 Gitlab自動化部署 - Pipeline

前言 GitLab Workflow內容包括,git 版本控制系統、CI/CD Pipeline,以及專案管理的功能,像 Wiki、Issue Tracking...

鐵人賽 Modern Web DAY 27
angular專案開發指南 系列 第 27

技術 E2E 自動測試 - Cypress

前言 專案開發後期會進入 QA 測試階段,其中免不了各種手動點擊切換頁面或迴歸測試等,每個功能都要人工進到畫面中看一遍有沒有問題,這樣不僅工作量大重複性高,且當...

鐵人賽 Modern Web DAY 26
angular專案開發指南 系列 第 26

技術 Angular 單元測試 - Karma

前言 透過自動化測試取代人工測試,降低測試成本,自動化測試帶來速度快、可重複與自動化的測試工程。 程式寫完之後,通常會需要做測試,可能就是跑跑看看東西或 log...

鐵人賽 Modern Web DAY 14
angular專案開發指南 系列 第 14

技術 實作租戶管理頁面(2)

前言 利用 JSON Server 快速模擬 Restful API,支援開發中最常用的 GET、POST、PUT、PATCH、DELETE、OPTIONS 等...

鐵人賽 Modern Web DAY 13
angular專案開發指南 系列 第 13

技術 實作租戶管理頁面(1)

前言 假設現在有一個租賃管理服務公司提出一個需求,有一批租戶的資訊需要被維護與管理,我們需要建一個頁面供使用者查詢租戶資訊,並支援新增,修改與刪除租戶資訊。...

鐵人賽 Modern Web DAY 12
angular專案開發指南 系列 第 12

技術 製作 Angular Http 通訊服務

前言 大多數前端應用都要透過 HTTP 協議與伺服器通訊,才能下載或上傳資料並訪問其它後端服務。Angular 給應用提供了一個簡化的 HTTP 客戶端 API...

鐵人賽 Modern Web DAY 11
angular專案開發指南 系列 第 11

技術 讓前後端獨立開發的假資料系統 - Json Server

前言 專案需求通常來源於對資料的處理,在專案規劃期間,前端開發人員經常需要先做一些 POC,甚至專案開始後,也經常需要在後端 API 尚未就緒前,先完成前端的功...

鐵人賽 Modern Web DAY 10
angular專案開發指南 系列 第 10

技術 挑個美美的UI框架 - Nebular

前言 前端的專案通常會挑一個樣式框架來搭配使用,好處是, 元件樣式如表格、列表與選單等元件不需要重新打造。 介面經過專業設計外觀優美。 元件樣式風格統一。...

鐵人賽 Modern Web DAY 9
angular專案開發指南 系列 第 9

技術 程式碼註解工具 - Compodoc

前言 程式碼註解對一個有一定複雜度的專案來說是有必要的,除了團隊合作的考量,有時候時間一久,自己可能也會忘記當初的設計理念或需求,導致錯誤理解一個變數,一段代碼...

鐵人賽 Modern Web DAY 8
angular專案開發指南 系列 第 8

技術 程式碼檢查(2) - Stylelint

前言 SCSS 相比於一般的 CSS 有著下列優點, 可變數 可運算 可使用 @mixin/@function 可繼承 @extend 支援巢狀結構 直接匯入...

鐵人賽 Modern Web DAY 7
angular專案開發指南 系列 第 7

技術 程式碼檢查(1) - ESLint

前言 Angular 搭配 TypeScript 使用,已經能夠在編譯階段檢查出很多問題了,為什麼還要程式碼檢查呢? 因為 TypeScript 檢查更注重的是...

鐵人賽 Modern Web DAY 6
angular專案開發指南 系列 第 6

技術 隨時隨地格式化 - Prettier

前言 開發專案前有些事情需要先確認, 使用相同的開發工具 例如要開發Java就使用 Eclipse,C#自然是用 Visual Studio,而當前最多前端...

鐵人賽 Modern Web DAY 5
angular專案開發指南 系列 第 5

技術 快速建立範例專案

使用StackBlitz建立範例專案 StackBlitz是一個非常方便的線上編輯器,可線上編輯各種主流框架,完成之後也便於在團隊成員中分享,適合用於製作互動式...

鐵人賽 Modern Web DAY 4
angular專案開發指南 系列 第 4

技術 Angular 基本構成簡介

Angular應用基本組成 模組(Modules) Angular的基本構成要素是NgModule。它會把相關的程式碼收集到一些功能集中。Angular應用...

鐵人賽 Modern Web DAY 3
angular專案開發指南 系列 第 3

技術 Angular 檔案結構介紹

快速開始 安裝 Angular CLI npm install -g @angular/cli 查看是否安裝完成 ng version 查看目前版本的angu...

鐵人賽 自我挑戰組 DAY 1

技術 Day 1 Angular Pipe 從0到1

建立Pipe指令 ng g p yourPipeName 或是在vscode上再要新增的地方右鍵 ng generate選擇@schematics/angul...

鐵人賽 DevOps DAY 1

技術 Day1: 前言與三十日的規劃

大家好,我是 William,這三十天,我想用一個簡單的前後端分離專案,向大家演示專案從開發到部署的流程。 目標與閱讀受眾 DevOps 的精神在於讓跨團隊與不...

鐵人賽 Modern Web DAY 2
angular專案開發指南 系列 第 2

技術 Angular 框架的特性

特性 以下列出一些主要的特性,提供大家決定是否選用Angular作為開發工具的參考。 由Google開發維護的前端框架,官方文件針對配置與開發方式都有詳細的說...

鐵人賽 Modern Web DAY 1
angular專案開發指南 系列 第 1

技術 Angular 專案從零開始

前言 由於經手的專案中經常有機會使用Angular框架,過程中累積了一些前端專案的開發心得,想在此跟大家做個整理與分享。 本次從一個新專案的檔案結構開始介紹,利...

技術 Angular Stock Route Guards (Day31)

雖然鐵人賽比完了,但是我依然會把這個專案繼續寫下去,如果還沒看之前Angular Stock的朋友,麻煩幫我點連結進去看。 好,接下來我們遇到一個問題在於說,...

鐵人賽 Modern Web DAY 30

技術 Angular 深入淺出三十天:表單與測試 Day30 - 表單原理

經過前面二十九天的的練習與學習,相信大家應該在表單的實作上都熟悉了不少,只要不是太複雜、太特別的表單應該也都難不倒你們。 今天是本系列文的最後一天,就讓我們來...