iT邦幫忙

angular相關文章
共有 316 則文章
鐵人賽 Modern Web DAY 17

技術 [DAY-17] Angular的表單管理-響應式表單(Reactive Form)-建構篇

響應式表單(Reactive Form)是Angular內建的表單模組。 為什麼需要響應式表單 以資料驅動(data driven)的方式關注表單的資料 關注...

鐵人賽 Blockchain DAY 17

技術 [區塊練起來-智能合約與DApp開發] DAY 17 - DApp 環境建置與開發工具

貼心小語 上一篇提到了 DApp 的概念及運作原理,其中我選擇使用 web3.js 以及 Angular 來開發,這篇將會一步一步把環境建置完畢。 Angul...

鐵人賽 Modern Web DAY 17

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

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

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

技術 day17 List常見問題(二)

簡述 列表中經常會遇到的問題大約幾下幾種: 很多功能模塊都會用到子組件,而在多數情況可能會有多個子組件, 並且在列表中需重複點擊開關,需額外拉出一個clas...

鐵人賽 Modern Web DAY 16
Angular 8 從推坑到放棄 系列 第 16

技術 [Day 15] Day 15 了 深入了解 Directive

透過attribute directive,我們可以自行擴充元件的屬性,讓元件更富有變化. 在 Angular 中,Directive 分成3種: Comp...

鐵人賽 Modern Web DAY 16

技術 [DAY-16] Angular的資料轉換-管道(pipe)-自訂管道

上一篇提到如何使用Angular內建的管道。Angular內建的管道固然很實用,但是不能涵蓋全部的使用情境,如果沒有涵蓋到,就自己來定義一個管道吧 事前準備 h...

鐵人賽 Blockchain DAY 16

技術 [區塊練起來-智能合約與DApp開發] DAY 16 - 介紹 DApp

什麼是 DApp? 全名是 去中心化應用程式(Decentralized Application, DApp) ,簡單來說就是後端使用區塊鏈技術的應用程式。跟採...

鐵人賽 Modern Web DAY 16

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

筆者在 Day13 的時候有跟大家分享過 ng add 的原理與運作方式,而 ng update 雖然也是走同樣的路徑,只不過筆者覺得後者在後續處理上,跟其他的...

鐵人賽 Modern Web DAY 15
Angular 8 從推坑到放棄 系列 第 15

技術 [Day 14] 了解 Angular Component 生命週期

了解 Angular Component 生命週期 在使用Angular Component時,可以在程式中針對 Angular 在運作程式時放入不同的 lif...

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

技術 day16 List常見問題(一)

簡述 列表中經常會遇到的問題大約幾下幾種: 當後台需要RWD,但欄位太多了,縮起來實在是太難看。 使用materia提供的MatPaginatorMod...

鐵人賽 Modern Web DAY 15

技術 [DAY-15] Angular的資料轉換-管道(pipe)

經過上一篇複雜的路由設定,這一篇的主題要來比較輕鬆但是同樣很實用的主題-管道(pipe) 什麼是管道(pipe) 為什麼需要轉換資料 在目前為止,我們所做的事情...

鐵人賽 Modern Web DAY 15

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

相信經過昨天的原理說明之後,大家一定迫不及待地想要趕快實作了!! 廢話不囉嗦,不管你是要新開一個 Schematics 或是用原本的專案都行,筆者會用原本的專案...

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

技術 day15 Cms Routing

簡述 要進入到首頁之前,哪些模塊跟路由需要先設定。 檔案結構 -src |-app |-app.component.css |-app.co...

鐵人賽 Modern Web DAY 14

技術 [DAY-14] Angular的路由(Router)-管理與切換頁面的好幫手-實際應用篇

上一篇設定好路由模組的設定,這一篇要實際應用設定好的路由模組,來實際切換頁面,顯示英雄的資料。 資料一覽 目前英雄列表的資料格式為: { "sta...

鐵人賽 Modern Web DAY 14

技術 [高效 Coding 術:Angular Schematics 實戰三十天] Day13 - ng add?

還記得筆者在 Day02 - 要學打人,先學挨打 有提到過關於 ng add 的應用嗎? 雖然我們都知道 ng add 可以幫我們新增某個 Library 或...

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

技術 day14 TabModule

簡述 傳統常見的導航做法多半是麵包屑breadcrumb, 但是在系統組織很多分層的結構下, 光要多方對帳,可能會查證的比較辛苦, 所以現在越來越多採 Tab...

鐵人賽 Modern Web DAY 13

技術 [DAY-13] Angular的路由(Router)-管理與切換頁面的好幫手

到目前為止,我們所做的一切內容,都是做在首頁。現在要來做更多頁面來顯示英雄的細節資料 事前準備 在開始之前,先修改一下原本的英雄資料,多一個descriptio...

鐵人賽 Modern Web DAY 13

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

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

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

技術 day13 Menu

簡述 其實Menu的控制項取決於登入者的權限。 功能 以Demo來說,所有的頁面種類有以下: index 首頁 user 用戶管理 admin 權限管理 c...

鐵人賽 Modern Web DAY 12
Angular 8 從推坑到放棄 系列 第 12

技術 [Day11] Property 與 事件 Binding

Angular 中 Components 之間的傳遞資料的方式,就長得像下面這張圖。 Input() 裝飾器使用方式 @Input 的目的是確認資料綁定 i...

鐵人賽 Modern Web DAY 12

技術 [DAY-12] Angular-RXJS非同步事件的好幫手2

上一篇提到什麼是RXJS和RXJS的基本觀念,這一篇要來實際操作RXJS。 在進入實際操作之前,還要來提RXJS方便的地方-運算子(Operators) 什麼是...

鐵人賽 Modern Web DAY 12

技術 [高效 Coding 術:Angular Schematics 實戰三十天] Day11 - 用 TypeScript Compiler API 來修改檔案內容

先前我們在練習時,不管是直接使用程式碼還是使用範本,都是很純粹的產生出一個全新的檔案,然後將其擺到正確的地方。這只是學習 Schematics 的第一步,做為一...

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

技術 day12 CoreComponent

簡述 在確認此使用者的相關資訊後會進入核心模塊,也是佈局畫面的底。 很多功能模塊會以延遲子路由的方式,掛在核心模塊裡。 畫面結構 <!--core.co...

鐵人賽 Modern Web DAY 11
Angular 8 從推坑到放棄 系列 第 11

技術 [Day 10] Angular Debug 技巧

了解 Angular Debug 訊息 以上的 範例 Code 因為沒有實際執行所以 Typescript 是當下找不到錯誤的,要執行過 onAddServe...

鐵人賽 Modern Web DAY 11

技術 [DAY-11] Angular-RXJS非同步事件的好幫手

在上一篇,使用httpClient取得API資料的時候,看到一段陌生的程式碼 ngOnInit() { // this.heros = this.da...

鐵人賽 Modern Web DAY 11

技術 [高效 Coding 術:Angular Schematics 實戰三十天] Day10 - 與 TypeScript Compiler API 的初次接觸

關於 TypeScript Compiler API 相信大家都知道什麼是 TypeScript ,而 TypeScript Compiler API 就是 T...

鐵人賽 Modern Web DAY 10
Angular 8 從推坑到放棄 系列 第 10

技術 [Day09] 什麼是 Directives

簡單講 Directives 就是 指示 DOM 如何做操作,而其操作又區分為改變屬性以及針對 DOM 做操作 例如: *ngIf <p *ngIf=&q...

鐵人賽 Modern Web DAY 10

技術 [DAY-10] Angular-使用HttpClient取得資料

在上一篇提到,所有存取資料的操作都應該在服務(Service)完成,元件(Componet)不應該負責存取資料,只應該負責如何顯示資料與畫面上的操作。 因此建立...

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

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

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

鐵人賽 Modern Web DAY 10

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

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