iT邦幫忙

angular相關文章
共有 422 則文章
鐵人賽 Microsoft Azure DAY 9

技術 Day 09- 丹脣外朗,皓齒內鮮:狼人殺 - 實戰 - 前端開發 (一)

圖片來源:bluecoders 做得越好的網站就跟衣冠禽獸一樣,表裡不一。 前端開發 我們來看當初訂定的產品規格, 入口網站 今天我們13人組了賽局,...

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

技術 day21 ProductModule(一)

簡述 開始實作商品管理的功能模塊。 功能 商品列表 商品類別新增修改 檔案結構 -src |-app |-cms |-produ...

鐵人賽 Modern Web DAY 2
Angular 全集中筆記 系列 第 2

技術 第 2 型 - Angular CLI

在開發 Angular 應用程式時,會利用 Angular CLI 進行工作空間 (Workspace) 的建立,以及各項元件的開發、測試與佈署。本篇將針對 A...

鐵人賽 Microsoft Azure DAY 19

技術 Day 19- 千錘百鍊煉成鋼 :狼人殺 - Review 與 Summary

前言 預計狼人殺APP的文章系列到這邊算一個段落,而正式的APP上線後預計會推廣一個月後關閉(除非燒起來就埋個Ads當公益公開了)。 不是開放原始碼就是免費...

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

技術 玩轉 Storybook: Day 02 安裝

Install Storybook 安裝 Storybook 只需要在Terminal,切換到現有專案的根目錄後,簡單的執行一行指令 npx sb init...

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

技術 玩轉 Storybook: Day 03 專案結構

前情提要 從開始安裝到完成,檢查專案目錄下變更的檔案結構,會發現Storybook的安裝做了以下的步驟。 安裝需要的相依套件 在Package.json加上建...

鐵人賽 Microsoft Azure DAY 13

技術 Day 13- 掌中乾坤:狼人殺 - 實戰 - 前端開發 (五)功能開發

前言 前兩天已經完成了畫面的製作,接下來帶大家把功能開發出來接上。 主持功能 <!-- Host --> <ng-conta...

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

技術 day20 CustomerModule

簡述 開始實作會員管理的功能模塊。 功能 會員列表 會員新增修改 會員等級新增修改 檔案結構 -src |-app |-cms...

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

技術 玩轉 Storybook: Day 04 Configure

預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook,若需要變更路徑及名稱,要在Storybook的CLI指令做設定。...

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

技術 day22 ProductModule(二):Image

簡述 開始實作商品管理的上傳圖片、預覽圖片以及相關功能。 功能 商品新增修改 在商品新增修改上有出現一個上傳圖片的功能, 我們會把上傳圖片的功能拉出來做一...

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

技術 玩轉 Storybook: Day 06 Component Story Format

Story檔案放置位置 Component對應的Story檔案,通常會放置在Component檔案旁邊。Story只會用於開發時期,在Production的bu...

鐵人賽 Modern Web DAY 25
Angular10 實作教學 系列 第 25

技術 NG10鐵人賽 - 25 - ReactiveForm Validator 驗證

說明 static min(min: number): ValidatorFn 數字要高於等於 min static max(max: number): Val...

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

技術 玩轉 Storybook: Day 15 Addons - Controls

Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式,這樣就不需要寫程式重啟,也能發現元件的變化。 要使用 Control...

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

技術 玩轉 Storybook: Day 07 Write stories

Template & Args 同一個元件的多個story function,都會重複的指定相同的Template,可以拉出一個共用 template...

鐵人賽 自我挑戰組 DAY 15

技術 [影片]第15天:Angular基本概念簡介(2)

今天把快速上手中Angular基本概念簡介這一節講完 粉絲專頁:https://www.facebook.com/dannyliu.me 補字區: [鐵人賽文...

鐵人賽 Modern Web DAY 16

技術 [Day16] Angular 主要概念 - 模組實作篇

上一篇文章有提到一些這次專案會用到的模組,本篇簡單把他實作一遍。 建立 feature modules 用 terminal 開啟該專案的資料夾後,輸入以下指令...

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

技術 玩轉 Storybook: Day 05 CLI Options

以下列出,啟動或是建置 Storybook 時,有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...

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

技術 玩轉 Storybook: Day 16 Addons - Viewport/Accessibility

Viewport https://storybook.js.org/docs/vue/essentials/viewport Viewport 也是預設安裝好的...

鐵人賽 Modern Web DAY 8
Angular10 實作教學 系列 第 8

技術 NG10鐵人賽 - 8 - 型別介紹 - type

type 功能一、定義純文字 ts AnimalStrings 是 型別 export enum AnimalEnum { Dog, Cat, Pi...

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

技術 玩轉 Storybook: Day 09 Decorators

Decorators Decorator是一種設計模式,把要被裝飾的Story當做參數,傳入裝飾器中,Decorator可以幫Story加上額外的資訊,賦予給S...

鐵人賽 Software Development DAY 11

技術 [Day11] 瀏覽器開發工具 - 擴充功能篇

雖然開發者工具中已經提供相當豐富的功能,也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API,像是目前大多主流的前端框架的開發者...

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

技術 玩轉 Storybook: Day 17 Unit Test with JEST

用 Storybook 搭配測試方法,從元件開發到完成整個專案,可以增加開發者的信心,不會擔心改A錯B的狀況發生,因為從邏輯面及UI面都能被完整的測試到。 單元...

鐵人賽 Modern Web DAY 26
Angular10 實作教學 系列 第 26

技術 NG10鐵人賽 - 26 - Template-Drive & Reacitve Forms 自訂驗證

Reactive Forms 自訂驗證 trim-required-validatorr.ts (自己手動建立檔案) import { AbstractCont...

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

技術 玩轉 Storybook: Day 10 Naming components and hierarchy

Naming components 修改一下Story檔案,對應於Component的Title名稱(default export區塊),就會發現Sidebar...

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

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

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

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

技術 玩轉 Storybook: Day 18 Automated Visual Testing

視覺回溯測試 做視覺回溯測試的目的是要檢查每次修改元件UI的變化,當專案越來越大時,或是接近上線時期,修改元件的部分,有時會影響到整個專案。人工去檢視一定會有疏...

鐵人賽 Modern Web DAY 10
Angular - 從零開始 系列 第 10

技術 Angular - 從零開始 - Day10 -範本參考變數基本認識

範本參考變數 在想命名的變數前面加上一個井字號,命給與自定義名稱,就可以完成,EX. #name,為避免與其他命名的變數相同,建議前面加一個任意英文字,我學習...

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

技術 玩轉 Storybook: Day 08 Parameters

Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料),Parameter能提供給不同的addon去做設定。...

鐵人賽 Microsoft Azure DAY 22

技術 Day 22- 鬼斧神工 :Serverless 電商 - 實戰 - 前端開發 (一)頁面規劃

前端頁面規劃 圖片來源:美麗台 產品架構的部分其實就跟狼人殺架構差不多,我們直接來參考各大網站對於 Woocommerce 的概略版面設計,上面是新光三越旗下...

鐵人賽 Modern Web DAY 11
Angular10 實作教學 系列 第 11

技術 NG10鐵人賽 - 11 - 型別實作(3) - enum 和 switch 重疊值顯示相同內容

一般 switch 匹配對象 應該只有單個,可當你需要複數配對,可以參照下面 code interface.ts export enum Role {...