iT邦幫忙

front-end相關文章
共有 37 則文章
鐵人賽 Modern Web
Angular 深入淺出三十天 系列 第 33

技術 [Angular 深入淺出三十天] Day 32 - 完賽心得

各位邦友大家好,我是 Leo 。 終於完賽了!!!!(舉雙手瘋狂吶喊中) 準備鐵人賽的這陣期間真是渡過一段非常艱辛的時期阿!!工作、家庭、鐵人賽,這蠟燭三頭燒的...

鐵人賽 Modern Web
Angular 深入淺出三十天 系列 第 32

技術 [Angular 深入淺出三十天] Day 31 - 三十天之後

「耶~~~ 我套完了!!」Wayne 套版完之後開心地大聲嚷嚷著。 「喂,冷靜一點,這裡是公眾場合耶。」我笑著推了他一下。 「抱歉抱歉,我太興奮了!!Angul...

鐵人賽 Modern Web
Angular 深入淺出三十天 系列 第 31

技術 [Angular 深入淺出三十天] Day 30 - Angular 小學堂(四之四)

昨天的登入頁、購物車頁與結帳成功頁大家都有順利套完版嗎?! 如果沒有的話沒關係,看完今天的文章再繼續努力吧!! 結帳頁套版 今天一開始我們先來套結帳頁的版...

鐵人賽 Modern Web DAY 30
Angular 深入淺出三十天 系列 第 30

技術 [Angular 深入淺出三十天] Day 29 - Angular 小學堂(四之三)

好的,我們今天要開始套版了!! 首先先到 GitHub 上把我已經切好的版型下載下來。 不過為了避免有人不知道怎麼下載,容我先小小地說明一下: 點擊 GitHu...

鐵人賽 Modern Web DAY 29
Angular 深入淺出三十天 系列 第 29

技術 [Angular 深入淺出三十天] Day 28 - Angular 小學堂(四之二)

昨天我們把落單的 UI 元件跟其模組關聯完之後,今天接著要來設定路由的部份! 開始設定路由前,可以先看看我們準備好的路徑定義檔 - app-path.const...

鐵人賽 Modern Web DAY 28
Angular 深入淺出三十天 系列 第 28

技術 [Angular 深入淺出三十天] Day 27 - Angular 小學堂(四之一)

這次小學堂要跟大家一起練習的是一個簡單的 EC 網站。 素材是來自剛好在鐵人賽前夕時,由六角學院在 The F2E - 前端修練精神時光屋 舉辦的 【網頁排版P...

鐵人賽 Modern Web DAY 27
Angular 深入淺出三十天 系列 第 27

技術 [Angular 深入淺出三十天] Day 26 - 路由總結(二)

子路由模組 當我們將頁面或功能包裝成模組的時候,也能在其中加入路由的設定,使其變成含有路由的子路由模組。 跟 AppRoutingModule 不一樣的是,子路...

鐵人賽 Modern Web DAY 26
Angular 深入淺出三十天 系列 第 26

技術 [Angular 深入淺出三十天] Day 25 - 路由總結(一)

我覺得路由是 Angular 裡很重要的一部分,也是一個初學者比較不容易理解的部分,所以希望透過這七天的小小練習,會讓大家對路由有個初步的認識。 不過分了七天講...

鐵人賽 Modern Web DAY 25
Angular 深入淺出三十天 系列 第 25

技術 [Angular 深入淺出三十天] Day 24 - 路由(七)

相信大家都用使用過 Facebook 吧? 當我們想在 Facebook 發文或留言的時候,如果不小心按到上一頁/下一頁,抑或是沒有取消發文或留言的狀態就想離開...

鐵人賽 Modern Web DAY 24
Angular 深入淺出三十天 系列 第 24

技術 [Angular 深入淺出三十天] Day 23 - 路由(六)

繼延遲載入之後,今天要分享的也是個非常實用的功能-路由守門員。 大家應該都知道守門員吧?如果不知道的話...警衛總知道了吧?! 顧名思義,這個功能可以幫我們把關...

鐵人賽 Modern Web DAY 23
Angular 深入淺出三十天 系列 第 23

技術 [Angular 深入淺出三十天] Day 22 - 路由(五)

Angular 是一個很注重模組化開發的框架 還記得我在 基礎結構說明(一) 有提到過這句話嗎? 我一直覺得這句話是在使用 Angular 開發時,很重要的...

鐵人賽 Modern Web DAY 22
Angular 深入淺出三十天 系列 第 22

技術 [Angular 深入淺出三十天] Day 21 - 路由(四)

到目前為止,我們都是只有用 Component 來設定我們的路由。但在實際應用上,通常我們會將相關的功能包裝成一個一個的 NgModule ,而每個 NgMod...

鐵人賽 Modern Web DAY 21
Angular 深入淺出三十天 系列 第 21

技術 [Angular 深入淺出三十天] Day 20 - 路由(三)

「原來 Angular 的路由是這樣設定的,比我想像中簡單耶!」Wayne 做完練習之後正玩得不亦樂乎。 「是滿簡單的,不過目前只有第一層而已。在實務上應用時一...

鐵人賽 Modern Web DAY 20
Angular 深入淺出三十天 系列 第 20

技術 [Angular 深入淺出三十天] Day 19 - 路由(二)

昨天我們完成了上圖的路由設定與換頁效果,所以 Angular 的路由機制到底做了什麼呢? 還記得我們昨天有在 app-routing.module.ts 做了...

鐵人賽 Modern Web DAY 19
Angular 深入淺出三十天 系列 第 19

技術 [Angular 深入淺出三十天] Day 18 - 路由(一)

「Leo,我一直有個問題想問你。」Wayne 神秘兮兮的說。 「什麼問題?」看他這麼神秘兮兮的我也緊張了起來。 「既然是 SPA ,就代表整個 Web 從頭到尾...

鐵人賽 Modern Web DAY 18
Angular 深入淺出三十天 系列 第 18

技術 [Angular 深入淺出三十天] Day 17 - 基礎結構說明(四)

「Yes!終於完成了!!」Wayne 做完 Todo List 之後開心地舉起雙手大聲歡呼。 「如何?寫 Angular 很好玩吧?!」我笑著說。 「好玩好玩!...

鐵人賽 Modern Web DAY 17
Angular 深入淺出三十天 系列 第 17

技術 [Angular 深入淺出三十天] Day 16 - Angular小學堂(三之四)

上圖是我們目前的進度,已完成了待辦事項的新增、刪除與狀態變更的功能。 CRUD (Create、Read、Update、Delete) 目前只剩下 U 還沒完...

鐵人賽 Modern Web DAY 16
Angular 深入淺出三十天 系列 第 16

技術 [Angular 深入淺出三十天] Day 15 - Angular小學堂(三之三)

回顧一下我們目前完成的效果: 完成了新增待辦事項的功能之後,接下來當然是要來能夠註記是否已完成該項待辦事項囉!如果你有操作的話其實會發現,目前清單前面的 Ch...

鐵人賽 Modern Web DAY 15
Angular 深入淺出三十天 系列 第 15

技術 [Angular 深入淺出三十天] Day 14 - Angular小學堂(三之二)

昨天我們已經順利讓 TodoListComponent 可以順利在 AppComponent 裡使用了,接下來為了方便大家練習,我們直接從 TodoMVC 的...

鐵人賽 Modern Web DAY 14
Angular 深入淺出三十天 系列 第 14

技術 [Angular 深入淺出三十天] Day 13 - Angular小學堂(三之一)

「哈~~~~」Wayne 打了一個好大的呵欠。 「喂喂喂!打起精神來阿你!有這麼無聊嗎?!」我用手臂推了 Wayne 一下,無奈他實在是太魁武了,連晃都沒晃一下...

鐵人賽 Modern Web DAY 13
Angular 深入淺出三十天 系列 第 13

技術 [Angular 深入淺出三十天] Day 12 - Angular CLI 常用指令說明(三)

「原來 ng serve 裡有這麼多學問阿?!真是長見識了!!那我們該如何交付我們的程式或是將我們開發出來的程式放到網路上呢?直接把整個專案資料夾放進空間裡嗎?...

鐵人賽 Modern Web DAY 12
Angular 深入淺出三十天 系列 第 12

技術 [Angular 深入淺出三十天] Day 11 - Angular CLI 常用指令說明(二)

「哇賽,這 Angular CLI 還真不是普通地強大耶!!既然它這麼強大,一定還有其他好用的功能吧?!之前每次開新專案之後,Coding 前要用的 ng se...

鐵人賽 Modern Web DAY 11
Angular 深入淺出三十天 系列 第 11

技術 [Angular 深入淺出三十天] Day 10 - Angular CLI 常用指令說明(一)

「欸,Leo!滿好玩的耶!!雖然留言板功能很陽春,但寫起來的感覺也很簡單,不像以前寫 jQuery 的時候要寫一堆操作 DOM 的程式碼,然後弄到自己頭昏眼花的...

鐵人賽 Modern Web DAY 10
Angular 深入淺出三十天 系列 第 10

技術 [Angular 深入淺出三十天] Day 09 - Angular 小學堂(二)

「哦哦哦哦!好像又更懂一點了!!」Wayne 點了點頭說。 「有更懂一點就好,也不枉費我講的這麼辛苦。」我喝了口咖啡後說道。 「那我們可以做更複雜一點的應用了吧...

鐵人賽 Modern Web DAY 9

技術 [Angular 深入淺出三十天] Day 08 - 基礎結構說明(三)

「原來 Angular 的 Template 語法跟資料綁定有這麼多名堂阿?!」Wayne 揉揉他的太陽穴,貌似有點快消化不良的樣子。 「是阿!但這一切其實都是...

鐵人賽 Modern Web DAY 8

技術 [Angular 深入淺出三十天] Day 07 - 基礎結構說明(二)

「原來如此!這樣有比較看得懂了!基本上裝飾器就是決定類別要扮演的角色,中繼資料則是把這個角色需要的資料傳入,然後 Angular 就會幫忙把其他的事情處理好的意...

鐵人賽 Modern Web DAY 7

技術 [Angular 深入淺出三十天] Day 06 - 基礎結構說明(一)

「原來 Angular 這麼好玩啊?!」Wayne 做完練習後,開心地跟我說道。 「是不是?!之後如果寫再複雜一點的應用更能體現出 Angular 厲害的地方!...

鐵人賽 Modern Web DAY 6

技術 [Angular 深入淺出三十天] Day 05 - Angular 小學堂(一)

「接下來要說明的是...喂!睡著了阿你?!」專心講解的我瞄了 Wayne 一眼,才發現這小子居然已經睡倒流口水了?! 「對不起!!因為一直在講解沒有實作,一不小...

鐵人賽 Modern Web DAY 5

技術 [Angular 深入淺出三十天] Day 04 - 資料夾結構說明

「我都裝好了!!接下來可以開始 Coding 了嗎?!」Wayne 把環境跟編輯器都安裝完之後,興奮地說。 「別急,你先開啟剛剛用 Angular CLI 建立...

鐵人賽 Modern Web DAY 4

技術 [Angular 深入淺出三十天] Day 03 - 開發工具與環境建置

「原來如此!好像很厲害!!」聽完我的介紹後,Wayne 一副饒有興致的樣子。 「對呀!想不想學阿?!我教你!」看到 Wayne 這麼有興趣,當然就是要趁勢推他入...