今天我們要來為我們用 Template Driven Forms 所撰寫的登入系統寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第二天的文章: Temp...
搞定了架構和想法後,再來就要搞定畫面的呈現。自己刻畫面固然可以隨心所欲呈現自己想要的樣子與控制自己只使用的最少的程式碼。但缺點就是什麼都要親力而為,會花上不少時...
Angular 應用程式的組成 一個完整的 Angular 應用程式會至少包含一個模組(module),正如我們創建一個 Angular 專案時,裡頭會包含的...
前情提要 將英雄們顯示在 Mat-Card 上後,我們進一步地要對英雄資料做點加工,並且製作英雄詳細介紹頁面。今天會完成下列事項: 使用 TypeScript...
在現代網頁中常會使用一種稱為 single page application(SPA)的技術,可以通過顯示或隱藏特定的 component 來更改用戶看到的畫面...
昨天介紹了開始撰寫測試之前必須要知道的二三事之後,想必大家已經對如何開始撰寫測試有了一些概念,但測試不是「有拜有保佑」,有寫就好。所以我們除了要知道如何開始撰...
在上一篇中提到了如何建立與使用一個 Service,也大概介紹了什麼是 Dependency Injection,在介紹使用 @Injectable() 裝飾...
Angular 官方建議使用兩種語言來開發,一是 Dart(也是一種由 Google 開發的語言),不過 Dart 相對比較少人用,而另一個語言就是我們今天要介...
前情提要 昨天我們已經成功地使用 HttpClient 發送 Http 請求,從 mock db 取得了英雄資料,並將資料列印在 console 裏。今天我們要...
在開始撰寫測試之前,先帶大家來了解一下 Angular 預設使用的測試框架 ─ Karma 。 Karma 的原名是 Testacular , Google...
在上一篇,建立起一個Angular+Nestjs的Nx專案,那麼這一篇就要來好好介紹什麼是Nx。 安裝Nx擴充套件 在認識Nx之前,建議安裝Nx官方的vs co...
在開發專案時你一定會使用到 Service 的技巧,Service 是一個廣泛的類別,包括 app 所需要的任何功能、數據或特性,而通常一個 service 是...
上一篇看完了 AngularJS 與 Angular 的差異後,我們今天要集中火力來看看 Angular 的主要特色。 可以跨平台開發: Progressi...
前幾篇講的大多都是想法與概念,都還沒有講到跟程式面有關的東西。接下來進入工程的世界了。 在聊到想法與構想的時候,可以非常天馬行空,什麼樣的問題跟什麼樣的解決方案...
今天要來用 Reactive Forms 的方式實作一個簡單的登入系統,撇開 UI 不談,具體的功能需求規格跟昨天差不多,如下所示: 帳號 格式為 Ema...
前情提要 在昨天我們建立了 Angular 專案、使用 JSON-server 來製作 mock db,並且建立了英雄資料。今天這篇文章我們將完成下列事項:...
Angular 是由 Google 主導,開源的 JavaScript 應用程式框架,目前穩定版本已經來到 Angular 11 了。 在學習程式的路上,不止一...
介紹完什麼是 template 與 structuarl directive 後,接著回來介紹 component 中被跳過的章節,那就是動態仔入 compon...
今天要來用 Template Driven Forms 的方式實作一個簡單的登入系統,撇開 UI 不談,具體的功能需求規格如下: 帳號 格式為 Email...
今天我們將建構專案開發環境,除了 Angular 之外,我們也將在專案中配置 json-server 這個套件,來模擬與後台的互動。 004 哈囉大閒人,妳在忙...
前言 常言道:「東漢末年分三國,烽火連天不休...」嗯?怎麼有股很想唱的感覺?總之三國就可以很火了,何況現在競爭激烈的前端框架已不只 VAR 三家了,我肝當然也...
今天,我們要來看看在使用 Angular CLI 後,專案的架構會長什麼樣? angular.json:是 Angular CLI 的設定檔,包含許多參數,...
在上一章中介紹了如何建立客製化的 attribute directive 與使用,而本章將會介紹如何建立 structural directives,那就接著往...
何謂表單? 維基百科是這樣說的: 表單是一種帶有空格可用於書寫以及能選擇和勾選相似內容的文件。 表單可用於填寫聲明、請求、命令、支票、稅單。 網頁...
接下來,我們就要來建立第一個專案範本。 首先,我們可以在桌面上先建一個資料夾,命名叫 Angular,記住不要使用中文字命名,以免發生錯誤。 接著打開...
在前幾天中有介紹了 Angular 中內建的一些 attribute directive,但是在實際開發專案時可能會遇到內建 attribute directi...
在上一章中介紹了 attribute directive 的用法,接著要來介紹另一種 Angular 中內建的 directive 那就是 sturctural...
準備要建立一個 Angular 的開發環境了,那我到底需要哪些家私呢?以下就來介紹一下: 1. 一台電腦(被揍飛 建議安裝的工具 以下是建議安裝的工具,當然如果...
前因 本身是個有十年以上平面設計經驗的轉職者,因為接觸 Side Project,而開始從切版接案接觸到前端領域,然後開始從六角學院自學前端相關的知識及技能,所...
在介紹完 component 與 template 後,接著要來介紹什麼是 dierctive,可能在前面的章節中多多少少都有提到,但是可能都沒有詳細的講解過,...