iT邦幫忙

angular相關文章
共有 687 則文章
鐵人賽 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 20

技術 [Angular] Day20. Angular Routing

在現代網頁中常會使用一種稱為 single page application(SPA)的技術,可以通過顯示或隱藏特定的 component 來更改用戶看到的畫面...

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 19

技術 [Angular] Day19. Dependency providers

在上一篇中提到了如何建立與使用一個 Service,也大概介紹了什麼是 Dependency Injection,在介紹使用 @Injectable() 裝飾...

鐵人賽 自我挑戰組 DAY 7

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 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 18

技術 [Angular] Day18. Introduction to services and dependency injection

在開發專案時你一定會使用到 Service 的技巧,Service 是一個廣泛的類別,包括 app 所需要的任何功能、數據或特性,而通常一個 service 是...

鐵人賽 自我挑戰組 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 17

技術 [Angular] Day17. Dynamic component loader

介紹完什麼是 template 與 structuarl directive 後,接著回來介紹 component 中被跳過的章節,那就是動態仔入 compon...

鐵人賽 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 的設定檔,包含許多參數,...

鐵人賽 Modern Web DAY 16

技術 [Angular] Day16. Writing structural directives

在上一章中介紹了如何建立客製化的 attribute directive 與使用,而本章將會介紹如何建立 structural directives,那就接著往...

鐵人賽 Modern Web DAY 1

技術 Angular 深入淺出三十天:表單與測試 Day01 - 前言

何謂表單? 維基百科是這樣說的: 表單是一種帶有空格可用於書寫以及能選擇和勾選相似內容的文件。 表單可用於填寫聲明、請求、命令、支票、稅單。 網頁...

鐵人賽 自我挑戰組 DAY 3

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

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

鐵人賽 Modern Web DAY 15

技術 [Angular] Day15. Attribute directives

在前幾天中有介紹了 Angular 中內建的一些 attribute directive,但是在實際開發專案時可能會遇到內建 attribute directi...

鐵人賽 Modern Web DAY 14

技術 [Angular] Day14. Built-in directives - structural

在上一章中介紹了 attribute directive 的用法,接著要來介紹另一種 Angular 中內建的 directive 那就是 sturctural...

鐵人賽 自我挑戰組 DAY 2

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

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

鐵人賽 自我挑戰組 DAY 1

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

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

鐵人賽 Modern Web DAY 13

技術 [Angular] Day13. Built-in directives - attribute

在介紹完 component 與 template 後,接著要來介紹什麼是 dierctive,可能在前面的章節中多多少少都有提到,但是可能都沒有詳細的講解過,...