iT邦幫忙

angular相關文章
共有 829 則文章
鐵人賽 Modern Web DAY 8

技術 Angular 深入淺出三十天:表單與測試 Day08 - 單元測試實作 - 登入系統 by Reactive Forms

今天我們要來為我們用 Reactive Forms 所撰寫的登入系統寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第三天的文章: Reactive Fo...

鐵人賽 Modern Web DAY 8

技術 DAY8 - 用ngx-lottie動畫製作一個吸引人的首頁

一個網站要吸引人,除了要有適當的排版,還要有吸引人的文字與豐富的動畫,讓人的目光不由自主地佇足想要瀏覽。 首頁可以說是一個網站的門面,好的首頁會讓人想要繼續看下...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10:一起了解 Angular 應用程式的啟動流程(二)

前一篇我們提到了一部分的啟動流程,今天我們會探討剩下的啟動流程資訊。 首先,我們要先知道 JavaScript 是從哪一個程式開始跑,而 Angular 應用程...

鐵人賽 Modern Web DAY 7

技術 第 7 天 讓元件歸元件、服務歸服務|service、@Injectable、AsyncPipe

前情提要 「英雄之旅」已經可以瀏覽完整的英雄列表,並透過路由參數來取得特定的英雄資料,達到換頁瀏覽細節資訊的功能,可以說,我們初步完成了英雄的資料查詢。在我們進...

鐵人賽 Modern Web DAY 7

技術 Angular 深入淺出三十天:表單與測試 Day07 - 整合測試實作 - 登入系統 by Template Driven Forms

昨天幫我們用 Template Driven Forms 所撰寫的登入系統寫完單元測試之後,今天則是要來為它寫整合測試。 大家還記得整合測試的目標是要測什麼嗎...

鐵人賽 Modern Web DAY 7

技術 DAY7 - 安裝 bootstrap

上一篇提到 Nebular 的其中一個缺點就是 沒有格線系統 ,需要另外安裝套件或是自行設計。 這是一個缺點,但並非致命的缺點,不可克服或解決。 以下是兩個解決...

鐵人賽 自我挑戰組 DAY 9

技術 Day 09:一起了解 Angular 應用程式的啟動流程(一)

啟動 Angular 開發伺服器 我們先打開 VS Code 的終端機面版,輸入 npm start,而 npm start 就會執行 ng serve 這個指...

鐵人賽 Modern Web DAY 6

技術 第 6 天 調整 HeroDetail 的顯示方式|AppRoutingModule、ActivatedRoute

前情提要 昨天我們完成了英雄細節元件 HeroDetailComponent,並且使用屬性繫結(property binding)的方式來顯示所選取的英雄細節資...

鐵人賽 Modern Web DAY 6

技術 Angular 深入淺出三十天:表單與測試 Day06 - 單元測試實作 - 登入系統 by Template Driven Forms

今天我們要來為我們用 Template Driven Forms 所撰寫的登入系統寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第二天的文章: Temp...

鐵人賽 Modern Web DAY 6

技術 DAY6 - 挑選一套自己喜歡的UI框架

搞定了架構和想法後,再來就要搞定畫面的呈現。自己刻畫面固然可以隨心所欲呈現自己想要的樣子與控制自己只使用的最少的程式碼。但缺點就是什麼都要親力而為,會花上不少時...

鐵人賽 自我挑戰組 DAY 8

技術 Day 08:初步了解 Angular 應用程式及元件

Angular 應用程式的組成 一個完整的 Angular 應用程式會至少包含一個模組(module),正如我們創建一個 Angular 專案時,裡頭會包含的...

鐵人賽 Modern Web DAY 5

技術 第 5 天 還我漂漂拳| property binding、interface

前情提要 將英雄們顯示在 Mat-Card 上後,我們進一步地要對英雄資料做點加工,並且製作英雄詳細介紹頁面。今天會完成下列事項: 使用 TypeScript...

鐵人賽 Modern Web DAY 5

技術 Angular 深入淺出三十天:表單與測試 Day05 - 如何寫出優秀的測試?

昨天介紹了開始撰寫測試之前必須要知道的二三事之後,想必大家已經對如何開始撰寫測試有了一些概念,但測試不是「有拜有保佑」,有寫就好。所以我們除了要知道如何開始撰...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07:開發 Angular 一定要會的 TypeScript

Angular 官方建議使用兩種語言來開發,一是 Dart(也是一種由 Google 開發的語言),不過 Dart 相對比較少人用,而另一個語言就是我們今天要介...

鐵人賽 Modern Web DAY 4

技術 Angular 深入淺出三十天:表單與測試 Day04 - 開始撰寫測試之前必須要知道的二三事

在開始撰寫測試之前,先帶大家來了解一下 Angular 預設使用的測試框架 ─ Karma 。 Karma 的原名是 Testacular , Google...

鐵人賽 Modern Web DAY 4

技術 DAY4 - 認識Nx

在上一篇,建立起一個Angular+Nestjs的Nx專案,那麼這一篇就要來好好介紹什麼是Nx。 安裝Nx擴充套件 在認識Nx之前,建議安裝Nx官方的vs co...

鐵人賽 Modern Web DAY 4

技術 第 4 天 英雄有偶包怎麼辦|*ngFor、JsonPipe、Angular Material、Mat-Card、Mat-Button

前情提要 昨天我們已經成功地使用 HttpClient 發送 Http 請求,從 mock db 取得了英雄資料,並將資料列印在 console 裏。今天我們要...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06:Angular 的主要特色與優點簡介

上一篇看完了 AngularJS 與 Angular 的差異後,我們今天要集中火力來看看 Angular 的主要特色。 可以跨平台開發: Progressi...

鐵人賽 Modern Web DAY 3

技術 DAY3 - 開始寫程式吧,建立 monorepo

前幾篇講的大多都是想法與概念,都還沒有講到跟程式面有關的東西。接下來進入工程的世界了。 在聊到想法與構想的時候,可以非常天馬行空,什麼樣的問題跟什麼樣的解決方案...

鐵人賽 Modern Web DAY 3

技術 Angular 深入淺出三十天:表單與測試 Day03 - Reactive Forms 實作 - 以登入為例

今天要來用 Reactive Forms 的方式實作一個簡單的登入系統,撇開 UI 不談,具體的功能需求規格跟昨天差不多,如下所示: 帳號 格式為 Ema...

鐵人賽 Modern Web DAY 3

技術 第 3 天 「速速前呂布奉先!」|NgModule、HttpClientModule、新增元件

前情提要 在昨天我們建立了 Angular 專案、使用 JSON-server 來製作 mock db,並且建立了英雄資料。今天這篇文章我們將完成下列事項:...

鐵人賽 自我挑戰組 DAY 5

技術 Day 05:AngularJS?Angular?傻傻分不清楚?

Angular 是由 Google 主導,開源的 JavaScript 應用程式框架,目前穩定版本已經來到 Angular 11 了。 在學習程式的路上,不止一...

鐵人賽 Modern Web DAY 2

技術 Angular 深入淺出三十天:表單與測試 Day02 - Template Driven Forms 實作 - 以登入為例

今天要來用 Template Driven Forms 的方式實作一個簡單的登入系統,撇開 UI 不談,具體的功能需求規格如下: 帳號 格式為 Email...

鐵人賽 Modern Web DAY 2

技術 第 2 天 諸神早安晨之美|建立 Angular 專案、使用 JSON-server

今天我們將建構專案開發環境,除了 Angular 之外,我們也將在專案中配置 json-server 這個套件,來模擬與後台的互動。 004 哈囉大閒人,妳在忙...

鐵人賽 Modern Web DAY 1

技術 第 1 天 大閒人降生

前言 常言道:「東漢末年分三國,烽火連天不休...」嗯?怎麼有股很想唱的感覺?總之三國就可以很火了,何況現在競爭激烈的前端框架已不只 VAR 三家了,我肝當然也...

鐵人賽 自我挑戰組 DAY 4

技術 Day 04:看看 Angular CLI 對我們做了什麼?認識專案架構

今天,我們要來看看在使用 Angular CLI 後,專案的架構會長什麼樣? angular.json:是 Angular CLI 的設定檔,包含許多參數,...

鐵人賽 自我挑戰組 DAY 3

技術 Day 03:不用三分鐘,建立第一個 Angular 專案範本

接下來,我們就要來建立第一個專案範本。 首先,我們可以在桌面上先建一個資料夾,命名叫 Angular,記住不要使用中文字命名,以免發生錯誤。 接著打開...

鐵人賽 自我挑戰組 DAY 2

技術 Day 02:準備好你的家私,為開發 Angular 做好準備

準備要建立一個 Angular 的開發環境了,那我到底需要哪些家私呢?以下就來介紹一下: 1. 一台電腦(被揍飛 建議安裝的工具 以下是建議安裝的工具,當然如果...

鐵人賽 自我挑戰組 DAY 1

技術 Day 01:入坑 Angular 的前因後果

前因 本身是個有十年以上平面設計經驗的轉職者,因為接觸 Side Project,而開始從切版接案接觸到前端領域,然後開始從六角學院自學前端相關的知識及技能,所...

鐵人賽 Modern Web DAY 30

技術 [Angular] Day30. Angular Module(一)

在 Angular 中應用程式是模塊化的,Angular 有自己的模塊化系統稱為 NgModule,他可以包含 component、service provid...