昨天我們把落單的 UI 元件跟其模組關聯完之後，今天接著要來設定路由的部份！ 開始設定路由前，可以先看看我們準備好的路徑定義檔 － app-path.const...
這次小學堂要跟大家一起練習的是一個簡單的 EC 網站。 素材是來自剛好在鐵人賽前夕時，由六角學院在 The F2E - 前端修練精神時光屋 舉辦的 【網頁排版P...
子路由模組 當我們將頁面或功能包裝成模組的時候，也能在其中加入路由的設定，使其變成含有路由的子路由模組。 跟 AppRoutingModule 不一樣的是，子路...
我覺得路由是 Angular 裡很重要的一部分，也是一個初學者比較不容易理解的部分，所以希望透過這七天的小小練習，會讓大家對路由有個初步的認識。 不過分了七天講...
相信大家都用使用過 Facebook 吧？ 當我們想在 Facebook 發文或留言的時候，如果不小心按到上一頁/下一頁，抑或是沒有取消發文或留言的狀態就想離開...
繼延遲載入之後，今天要分享的也是個非常實用的功能－路由守門員。 大家應該都知道守門員吧？如果不知道的話...警衛總知道了吧？！ 顧名思義，這個功能可以幫我們把關...
Angular 是一個很注重模組化開發的框架 還記得我在 基礎結構說明（一） 有提到過這句話嗎？ 我一直覺得這句話是在使用 Angular 開發時，很重要的...
到目前為止，我們都是只有用 Component 來設定我們的路由。但在實際應用上，通常我們會將相關的功能包裝成一個一個的 NgModule ，而每個 NgMod...
「原來 Angular 的路由是這樣設定的，比我想像中簡單耶！」Wayne 做完練習之後正玩得不亦樂乎。 「是滿簡單的，不過目前只有第一層而已。在實務上應用時一...
昨天我們完成了上圖的路由設定與換頁效果，所以 Angular 的路由機制到底做了什麼呢？ 還記得我們昨天有在 app-routing.module.ts 做了...
「Leo，我一直有個問題想問你。」Wayne 神秘兮兮的說。 「什麼問題？」看他這麼神秘兮兮的我也緊張了起來。 「既然是 SPA ，就代表整個 Web 從頭到尾...
「Yes！終於完成了！！」Wayne 做完 Todo List 之後開心地舉起雙手大聲歡呼。 「如何？寫 Angular 很好玩吧？！」我笑著說。 「好玩好玩！...
上圖是我們目前的進度，已完成了待辦事項的新增、刪除與狀態變更的功能。 CRUD （Create、Read、Update、Delete） 目前只剩下 U 還沒完...
回顧一下我們目前完成的效果： 完成了新增待辦事項的功能之後，接下來當然是要來能夠註記是否已完成該項待辦事項囉！如果你有操作的話其實會發現，目前清單前面的 Ch...
昨天我們已經順利讓 TodoListComponent 可以順利在 AppComponent 裡使用了，接下來為了方便大家練習，我們直接從 TodoMVC 的...
「哈~~~~」Wayne 打了一個好大的呵欠。 「喂喂喂！打起精神來阿你！有這麼無聊嗎？！」我用手臂推了 Wayne 一下，無奈他實在是太魁武了，連晃都沒晃一下...
「原來 ng serve 裡有這麼多學問阿？！真是長見識了！！那我們該如何交付我們的程式或是將我們開發出來的程式放到網路上呢？直接把整個專案資料夾放進空間裡嗎？...
「哇賽，這 Angular CLI 還真不是普通地強大耶！！既然它這麼強大，一定還有其他好用的功能吧？！之前每次開新專案之後，Coding 前要用的 ng se...
「欸，Leo！滿好玩的耶！！雖然留言板功能很陽春，但寫起來的感覺也很簡單，不像以前寫 jQuery 的時候要寫一堆操作 DOM 的程式碼，然後弄到自己頭昏眼花的...
「哦哦哦哦！好像又更懂一點了！！」Wayne 點了點頭說。 「有更懂一點就好，也不枉費我講的這麼辛苦。」我喝了口咖啡後說道。 「那我們可以做更複雜一點的應用了吧...
「原來 Angular 的 Template 語法跟資料綁定有這麼多名堂阿？！」Wayne 揉揉他的太陽穴，貌似有點快消化不良的樣子。 「是阿！但這一切其實都是...
「原來如此！這樣有比較看得懂了！基本上裝飾器就是決定類別要扮演的角色，中繼資料則是把這個角色需要的資料傳入，然後 Angular 就會幫忙把其他的事情處理好的意...
「原來 Angular 這麼好玩啊？！」Wayne 做完練習後，開心地跟我說道。 「是不是？！之後如果寫再複雜一點的應用更能體現出 Angular 厲害的地方！...
「接下來要說明的是...喂！睡著了阿你？！」專心講解的我瞄了 Wayne 一眼，才發現這小子居然已經睡倒流口水了？！ 「對不起！！因為一直在講解沒有實作，一不小...
「我都裝好了！！接下來可以開始 Coding 了嗎？！」Wayne 把環境跟編輯器都安裝完之後，興奮地說。 「別急，你先開啟剛剛用 Angular CLI 建立...
「原來如此！好像很厲害！！」聽完我的介紹後，Wayne 一副饒有興致的樣子。 「對呀！想不想學阿？！我教你！」看到 Wayne 這麼有興趣，當然就是要趁勢推他入...
「嗨！Leo！好久不見！」跟我打招呼的是 Wayne。Wayne 是我在進修時，同期的同學、專題小組成員，也是我的好朋友。 「嗨！Wayne！好久不見！最近好嗎...
在一個風雨交加、打雷閃電的夜晚，我正坐在電腦前專注地看著螢幕中的文章並喃喃自語著。 「哇賽！才幾年沒碰 Web Front-End，怎麼前端世界變了這麼多阿？！...
各位邦友大家好，我是Leo，這是我第一次參賽。 在這三十天裡，我會用比較淺白的方式來跟大家分享我目前所知道的 Angular。 本系列文章適合： 寫過一些前端...
前言昨天簡單介紹了切版的先備知識後，今天以套用 Bootstrap4 切版為主軸，說明如何在 Bootstrap4 基礎下，設定自己的主題色，以及運用 Boot...
Leo
Anny Cheng
iThome鐵人賽
看影片追技術