iT邦幫忙

angular相關文章
共有 422 則文章
鐵人賽 Modern Web DAY 8
用Angular打造完整後台 系列 第 8

技術 day08 共用service(二)

簡述 說明會有哪些常見的服務是所有組件都會用的。 功能 開發過程中有幾種服務是必然用到的。 logger.service.ts web.service.ts...

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

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

技術 4.[幸福銅鏡] 去除inline-block元素間間距

今天久違的把我最喜歡的設計師的圖刻完,關於頁面 遇到一個很久沒碰到的問題(因為最近大量使用flex去排版XD),行內塊級的間距,會因元素HTML標籤間的空白、換...

技術 3.[幸福銅鏡] docker port for angular

docker run --name miaoli -v $PWD:/var/miaoli -it -d -p 4200:4200 ubuntu docker...

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

技術 day04 SharedModule(二)

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

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

技術 day12 CoreComponent

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

鐵人賽 Modern Web DAY 16

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

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

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

技術 day07 共用service(一)

簡述 說明會有哪些常見的服務是所有組件都會用的。 功能 開發過程中會有幾種服務是必然用到的。 logger.service.ts web.service.ts...

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

技術 day09 共用service(三)

簡述 說明會有哪些常見的服務是所有組件都會用的。 功能 開發過程中有幾種服務是必然用到的。 logger.service.ts web.service.ts...

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

技術 day06 json-server 模擬與 Model 建置(二)

簡述 上一篇大概說明模擬數據的認知, 這篇就快速帶過安裝跟執行json-server, 以及相關的model建置。 實作 (一) json-server流程...

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

技術 day10 AppComponent(一)

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

鐵人賽 Modern Web DAY 14

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

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

技術 Angular @HostListener 避免關閉瀏覽器

利用 @HostListener 關閉 browser 前會先詢問 import { HostListener } from '@angular/core';...

鐵人賽 Microsoft Azure DAY 10

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

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

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

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

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

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

技術 day25 SearchModule(二):應用

簡述 列表中非常常見的搜尋列, 如下圖所示: 功能 搜尋列的組成大約分幾種: input 輸入編號或是帳號。 select 下拉式選單。 data 時間...

鐵人賽 自我挑戰組 DAY 24
人生第一次的SideProject 系列 第 24

技術 [Day 24 ] 角色卡部署至Github測試上線

今天陸陸續續寫了一些進度,不過後來想到角色卡跟資料庫無關的部分功能基本都OK了,就先來試著發布在網路上看看。 因為專案本來就是用Github做版控,所以buil...

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

技術 day23 OrderModule

簡述 開始實作訂單管理的功能模塊。 功能 訂單列表(換頁搜尋)。 用Dialog新增/修改訂單。 用子組件查看商品。 檔案結構 -src |-app...

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

技術 day17 List常見問題(二)

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

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

技術 day15 Cms Routing

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

鐵人賽 Microsoft Azure DAY 11

技術 Day 11- 掌中乾坤:狼人殺 - 實戰 - 前端開發 (三)主持畫面

前言 昨天我們開發完入口畫面之後,現在要接著做房間的版面。 從前端開始建構的時候,我們有訂出規格: Layout上我們預先設計可以辨識創立房間的ID跟分享的...

鐵人賽 Microsoft Azure DAY 30

技術 Day 30 - 平步青雲,漫步雲端 - 總結及開放測試預告。

前言 完賽啦!!今年是筆者第一次參加鐵人賽,臨時決定參賽的話,30天要想好文章架構然後直接打造出兩款APP真的有點硬,而現在還想要回去將整個文章架構給調整到可以...

鐵人賽 Modern Web DAY 15

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

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

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

技術 day14 TabModule

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

鐵人賽 自我挑戰組 DAY 11

技術 [影片]第11天:在Service中使用HttpClient

今天完成文件中,試一試章節>管理資料做完。 GitHub Stackblitz 粉絲專頁:https://www.facebook.com/dannyl...

技術 2.[幸福銅鏡] 環境建置

get node and npm basically To get this version, you can use the apt package mana...

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

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

鐵人賽 Microsoft Azure DAY 12

技術 Day 12- 掌中乾坤:狼人殺 - 實戰 - 前端開發 (四)玩家畫面

前言 昨天我們做完Layout版面跟主持人版面之後,我們接下來可以來設計玩家的畫面。 賽局準備 玩家的視野會非常的侷限,基本上在賽局開始之前基本上身份跟角...

技術 【Angular with .NET Core】建立後端環境

建立demo資料夾。 在demo資料夾中分別建立backend與frontend資料夾。 使用CMD在backend建立.NET Core新專案,命名Demo...

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

技術 day18 UserModule

簡述 上篇導航到首頁成功後, 我們可以先實做功能較小的用戶資訊功能模塊。 功能 User基本資訊 改變自己的登入密碼 檔案結構 -src |-app...