iT邦幫忙

angular相關文章
共有 829 則文章
鐵人賽 Modern Web DAY 5
玩轉 Storybook 系列 第 5

技術 玩轉 Storybook: Day 05 CLI Options

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

鐵人賽 自我挑戰組 DAY 4

技術 [影片]第4天:你的第一個Angular應用-元件篇

今天閱讀你的第一個Angular應用-元件部分,並解釋上次onclick原本傳統寫法發生is not define的原因 補字區:[鐵人賽文章需300字以上內...

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

技術 NG10鐵人賽 - 19 - localStorage & sessionStorage 使用

說明 用於 使用 localStorage 和 sessionStorage 儲存資料,並且在重新整理網頁時,再次讀取資料,並載入到應用程式 localStor...

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

技術 玩轉 Storybook: Day 04 Configure

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

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

技術 第 4 型 - Angular 模組

在開發 Angular 應用程式時,會依照特定的規則(如是否為相同應用領域、或是否為一連串的作業流程等等)將元件分類至不同的模組。這一篇就來看如何定義與建立 A...

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

技術 NG10鐵人賽 - 18 - 資料傳遞處理 - 處理完再給你

說明 調用 resolve service 先把資料處理完成 ,再用 private route: ActivatedRoute 給 component 調用...

鐵人賽 自我挑戰組 DAY 3

技術 [影片]第3天:你的第一個Angular應用

今天練習了Angular 入門:你的第一個應用中的範本語法這一個章節 今天的程式碼補字區:[鐵人賽文章需300字以上內容][鐵人賽文章需300字以上內容][鐵...

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

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

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

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

技術 NG10鐵人賽 - 17 - 資料傳遞處理 - 我丟要的接

利用 subject 放置 資料,讓 接收者 取得資料 data-store.service.ts private bookSubject = new Subj...

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

技術 玩轉 Storybook: Day 02 安裝

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

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

技術 第 2 型 - Angular CLI

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

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

技術 NG10鐵人賽 - 16 - 資料傳遞處理 - 資料都給我

擬物化介紹 service : 櫃台資料: 留言component:人(A 和 B) A 請人把留言送回 A,B 把留言 放到櫃檯,C 把留言 放到櫃檯 資料流...

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

技術 第 1 型 - 前言

面對愈來愈複雜難搞的使用者操作需求,使得前端開發維護的難度日益增加,而 Angular 框架在各開發階段提供了完整的開發模式,讓在應用程式的前端開發可以更容易的...

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

技術 NG10鐵人賽 - 15 - 資料傳遞處理 - 照順序給值

擬物化介紹 service : 櫃台資料: 留言component:人(A 和 B) A 把留言 放到櫃檯,B 到櫃檯 看留言 資料流向 先執行到的 Acomp...

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

技術 NG10鐵人賽 - 14 - 資料傳遞處理 - @Input 傳入資料要改寫或做變化處理

基本使用說明可以參考我之前寫過相關的文章 @Input 基礎使用https://ithelp.ithome.com.tw/articles/10206340@O...

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

技術 NG10鐵人賽 - 13 - 圖片(2) - 檔案接API

利用昨天學到的檔案上傳將檔案傳到 Service 處理 component.ts constructor( private materialServic...

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

技術 NG10鐵人賽 - 12 - 圖片(1) - 顯示

單選圖片顯示 html <input type="file" (change)="uploadImg($event)&quo...

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

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

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

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

技術 NG10鐵人賽 - 9 - 型別實作(1) - 物件實體化實作

建立 型別到 物件化出物件,並執行功能 animal.model.ts // export 可以讓其他 ts 檔案去引用 // void 是不回傳值的型別 ex...

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

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

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

鐵人賽 Modern Web DAY 6

技術 【D6 - 三國鼎立時代】三大前端時代 -- 為何我選擇了Vue?

Agular: 我爸 Google 啦~React: 我爸 Facebook 啦~Vue: 我爸.... 前言 各位今天我廢話少一點直接上表格~ A...

技術 Angular2+ 佈署到IIS上遇到的問題

紀錄一下遇到的問題 路由 狀況:路由之間的切換都沒問題,但直接輸入位置(如 localhost:4200/index ) 就會跳錯誤(找不到資源) 解法:參...

技術 Angular:在元件之間傳遞資料的4種方式

1. 父元件至子元件: @Input 子元件內的@Input裝飾器定義屬性,父元件再透過屬性繫結(Property Binding)將資料傳遞給子元件。Chil...

技術 了解Angular的生命週期

元件(component)從建立到銷毀的一整個生命週期當中,會經歷數個階段。 Angular提供了lifecycle hooks,讓我們可以藉由對應每個生命周期...

技術 [Angular][RxJs] 監聽特定 button click事件 fromEvent

需求: 表單Submit後需要從後端做 新增or修改,為避免User重複觸發,打算將Submit設計為 Observable,可以搭配Rxjs的exhaustM...

技術 [Angular][RxJs][誤區筆記] Observable Unsubscribe

架構:(1) userComponent:訂閱(subscribe)sharedService 的 User資料 (2)sharedService利用Subje...

技術 Angular good practice - 前端工程師都應該了解的source maps

目前情境:按下Add Server,會將資料塞入陣列中,並在畫面上以列表的型式表現。 這是一個有邏輯錯誤的程式,會刪除所選取的下一個Another Server...

技術 Angular good practice-顯示Recipe Detail、處理Shopping-List

上一篇完成recipe-list的顯示後,接下來要針對右半部recipe細節的顯示。 這個部分,會有dropdown-list的顯示,目前尚未完善,之後會再回頭...

技術 Angular good practice - 新增ingredient Model、shopping list edit頁面

由於ingredient model會有數個component共享,所以將之放入共享資料夾,會較適合。 結構:app|-- shared   |--- ingr...

技術 Angular Step by Step - 建立model,使用內嵌繫結、屬性繫結、ngfor結構型指令

在recipes資料夾,輸入ng g i recipe --type=model,新增Recipe Model。 結構圖recipes|-- recipe.mo...