iT邦幫忙

angular相關文章
共有 687 則文章
鐵人賽 Blockchain DAY 25

技術 [區塊練起來-智能合約與DApp開發] DAY 25 - web3.js 訂閱Event

貼心小語 上一篇成功透過 web3.js 來呼叫合約中的函式。我們之前設計的函式只要會變更狀態變數的操作都會記錄 log ,也就是觸發 event ,那要怎麼去...

鐵人賽 Modern Web DAY 13
玩轉 Storybook 系列 第 13

技術 玩轉 Storybook: Day 13 Simple and Composite - Angular

在這個單元我們使用官網的教學搭配Angular的框架,STEP BY STEP的撰寫Component及Stories。(如果是使用Vue的讀者,可以跳過這個單...

鐵人賽 Modern Web DAY 11
用Angular打造完整後台 系列 第 11

技術 day11 AppComponent(二) 登入初始流程

簡述 AppComponent 是系統內的 根組件,這篇會講述登入初始流程。 功能 開發過程中大概遇到幾種設定如下。 多語系初始設定 icon 讀取圖片 登入...

鐵人賽 Modern Web DAY 7

技術 [Angular] Day7. Content projection

本章節將要介紹如何使用 ng-content 將一個 Component 的內容投影到另一個 Component 中,創建靈活且可被重複使用的 Componen...

鐵人賽 Modern Web

技術 [Angular] Day31. Angular Module(二)

在上一篇中介紹了 Angular 中 Module 的一部分,接著要繼續介紹還沒講完的部分,那就往下看吧 Entry components 在上一張的 Ng...

鐵人賽 Modern Web DAY 13

技術 [高效 Coding 術:Angular Schematics 實戰三十天] Day12 - Angular Schematics API 之牛刀小試

昨天筆者提到如何使用 TypeScript Compiler API 來修改檔案,但想必大家多少應該有感覺到,如果要從那一層又一層的資料結構中找到需要用的區塊,...

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

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

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

鐵人賽 Modern Web DAY 19

技術 [高效 Coding 術:Angular Schematics 實戰三十天] Day18 - 將 Schematics 整合進你的 Angular 專案裡

隨著自己開發的 Angular 專案越來越多,有時候難免會覺得自己好像一直在做重複的事,因此我們會開始試著將可以重複使用的模組拆成獨立的函式庫,就像是保哥的認識...

鐵人賽 Blockchain DAY 29

技術 [區塊練起來-智能合約與DApp開發] DAY 29 - 實戰DApp!區塊鏈履歷應用(3)

貼心小語 上一篇做完了 Government 與 Host 的功能頁面,還將共同功能抽離出來做成 ComponentBase ,使我們開發更順暢,所以今天來完成...

鐵人賽 Modern Web DAY 13

技術 [Angular] Day13. Built-in directives - attribute

在介紹完 component 與 template 後,接著要來介紹什麼是 dierctive,可能在前面的章節中多多少少都有提到,但是可能都沒有詳細的講解過,...

鐵人賽 Modern Web DAY 28

技術 Angular 深入淺出三十天:表單與測試 Day28 - 自訂表單元件

經過了這段時間的練習與學習,相信大家應該越來越能體會 Angular 表單的強大與便利。 不過既然 Angular 表單這麼好用,如果能讓自己做的 Compo...

鐵人賽 Modern Web DAY 16

技術 Angular 深入淺出三十天:表單與測試 Day16 - Template Driven Forms vs Reactive Forms

這段期間,我們用 Template Driven Forms 與 Reactive Forms 各自做了一個登入表單(靜態)與被保人表單(動態),而且我們也都...

鐵人賽 Modern Web DAY 21

技術 [DAT-21] Typescript 介紹-列舉(Enum)

這一篇要來介紹Typescript的實用功能 - 列舉(Enum) 什麼是列舉(Enum) 列舉可以轉換一組備有限範圍的資料,比如說日期、郵遞區號、星期等等。列...

鐵人賽 Modern Web DAY 5
用Angular打造完整後台 系列 第 5

技術 day05 json-server 模擬與 Model 建置(一)

簡述 當設計圖與規格都出現後,前後端都會開始製作底層,前端雖著重畫面呈現,開發的大部分時間也確實花在畫面上居多,為了減低變動更改程式,大多數人會等待後端給API...

鐵人賽 Modern Web DAY 17

技術 [高效 Coding 術:Angular Schematics 實戰三十天] Day16 - 實戰 ng update

練習目標 今天的練習非常簡單,我們要利用 ng update 來改變 app.component.ts 裡, title 屬性的值。 雖然這個練習非常地陽春、簡...

鐵人賽 Microsoft Azure DAY 10

技術 Day 10- 丹脣外朗,皓齒內鮮:狼人殺 - 實戰 - 前端開發 (二)入口網站

今天直接進入Live Coding的部分,有關影片內容可以看 前言 前幾天帶大家理順專案的流程,昨天定義好前端資料格式後,然後進入正式開發流程。 從Stac...

鐵人賽 Modern Web DAY 22

技術 Angular 深入淺出三十天:表單與測試 Day22 - 把 Cypress 變成 TypeScript 版

平常都用慣 TypeScript 版的 Cypress,但這兩天都用 JavaScript 在寫測試,令我有點不太習慣。 雖然 JS 版或 TS 版的差別並沒...

鐵人賽 Modern Web DAY 19

技術 [Day19] Angular 主要概念 - Component 實作(2)

本篇延續上篇的實作 components ,用商家管理的功能來說明 Container components 與 Presentational componen...

鐵人賽 Modern Web DAY 25

技術 [Angular] Day25. Reactive forms (一)

上一篇中介紹完 Template-driven forms 後,接著再介紹 Angular 的另一種 form,那就是 Reactive forms,它提供了一...

鐵人賽 Modern Web DAY 10

技術 [高效 Coding 術:Angular Schematics 實戰三十天] Day09 - 撰寫支援 Angular 專案的 Schematics 的測試程式

在測試程式中模擬 Angular 專案環境 當我們開始將 Schematic 與 Angular 專案整合後,就會需要處理越來越多的細節。尤其是在測試時,會更需...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15:如何解決 PowerShell 無法使用 Angular 指令的問題?

學習 Angular 的過程中,遇到了一些教學資源不見得會遇到的問題,還真是家常便飯,而且你個人電腦沒遇到,但公司派發給你的筆電偏偏就遇到了,所以就來記錄一下吧...

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

技術 E2E 自動測試 - Cypress

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

鐵人賽 Modern Web DAY 14
玩轉 Storybook 系列 第 14

技術 玩轉 Storybook: Day 14 Addons - Essential / Actions

Storybook的另一個主要的功能就是Addons 在使用Storybook做元件開發設計時搭配Addon功能更加強大 接下來就來好好體驗感受他的威力吧 寫在...

鐵人賽 Modern Web DAY 15

技術 [Day15] Angular 主要概念 - 模組介紹篇

大概介紹完了 Angular 的建置與開發後,我們來看看 Angular 的世界包含了哪些角色,在今天先向大家介紹模組。 Modules 在日漸複雜的前端領域,...

鐵人賽 Modern Web DAY 3
用Angular打造完整後台 系列 第 3

技術 day03 SharedModule(一)

簡述 SharedModule是共用模塊的集合地,此篇分兩篇來介紹常見的幾種共用模塊。 功能 後台製作的過程中,有許多功能是複用的。 DialogModule...

鐵人賽 Modern Web DAY 4

技術 [Angular] Day4. Component

講完前面幾張比較偏向原理與不常使用到的章節後,從這章節開始會介紹比較實際運用的東西。 就像在 Day1 所提到的,Angular app 是由無數個大大小小的...

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

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

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

鐵人賽 Modern Web DAY 10
用Angular打造完整後台 系列 第 10

技術 day10 AppComponent(一)

簡述 AppComponent是系統內的 根組件,通常會建議寫部分服務的初始設定。 功能 開發過程中大概遇到幾種設定如下: 多語系初始設定 icon讀取圖片...

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

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

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

鐵人賽 Modern Web DAY 18

技術 [Day18] Angular 主要概念 - Component 實作(1)

本篇會介紹如何建立 component,以及用一些實際的功能說明上一篇的概念 實作出 layout 所需的 components 在實作 modules 的那篇...