視覺回溯測試 做視覺回溯測試的目的是要檢查每次修改元件UI的變化,當專案越來越大時,或是接近上線時期,修改元件的部分,有時會影響到整個專案。人工去檢視一定會有疏...
Angular [目標] 了解 Angular資料結構 .Component 元件 安裝 ng generate component [compon...
前言 所有前端框架都會遇到一個共同的問題,就是資料與狀態如何在組件之間傳遞,根據元件之間不同的組合關係,大致可分類為父子,兄弟與沒有關係,在 Angular 中...
下載版型 確認網頁是否能順利執行,個人使用lite-server。 建立Angular專案。 進入專案的index.html,<head&...
今日我們來利用Angular CLI建立一個新的專案 來打開VsCode內建的terminal 幫我移動到欲放置專案的路徑 cd {專案路徑} Angul...
到目前為止,我們所做的一切內容,都是做在首頁。現在要來做更多頁面來顯示英雄的細節資料 事前準備 在開始之前,先修改一下原本的英雄資料,多一個descriptio...
前言 回到網站的首頁,為了量化租戶管理的效能,通常會將資料數據透過圖表的方式呈現,在網路上可以找到許多套件與 Angular 搭配完成各種任務,今天要跟大家介紹...
明天一大早,以公假狀態,要坐車北上去聽台灣首屆 Angular conference~今晚針對議程的關鍵字去做預習!! How Reactive Program...
上次跟大家分享了寫測試的好處與如何撰寫測試之後,大家有自己試著寫寫看嗎?今天要來調整上次所寫的測試程式碼,令它能夠測試我們昨天所撰寫的程式。 先來看一下昨天最終...
此篇介紹的 API 依序為: literals partially-ordered-set priority-queue template...
接下來,我們就要來建立第一個專案範本。 首先,我們可以在桌面上先建一個資料夾,命名叫 Angular,記住不要使用中文字命名,以免發生錯誤。 接著打開...
我們前一篇,雖然有將需求二實作出來,但是看到 keyCode 已被淘汰的訊息,還是覺得有點不痛快。 上網搜尋了一下,找到一篇其他開發者分享的文章: [從 0 開...
Viewport https://storybook.js.org/docs/vue/essentials/viewport Viewport 也是預設安裝好的...
課程目標‧ 了解Angular前端開發框架與其優勢‧ 學會有效率的利用Angular開發前端網頁應用程式‧ 掌握開發Angular的重要觀念與開發技巧 詳細資訊...
面向前端的CDN解決方案! 前陣子想在Angular的專案下套用CDN機制過去我都是使用 webpack publicPath 來達成但使用Angular我不...
在 Angular 中應用程式是模塊化的,Angular 有自己的模塊化系統稱為 NgModule,他可以包含 component、service provid...
前言 在前兩篇的介紹中我們了解到了什麼是Angular中的form,並且對Reactive form進行了實作,不過當我們在開發專案的時候,由於form的cod...
前言 大多數前端應用都要透過 HTTP 協議與伺服器通訊,才能下載或上傳資料並訪問其它後端服務。Angular 給應用提供了一個簡化的 HTTP 客戶端 API...
簡述 在確認此使用者的相關資訊後會進入核心模塊,也是佈局畫面的底。很多功能模塊會以延遲子路由的方式,掛在核心模塊裡。 畫面結構 <!--core.com...
前情提要 DAY6-Angular6之假如app是舞台劇/@Component項目 開演啦! 在沒有 routing 的狀況下 以下就可以演好一齣戲了,僅讓 I...
上一篇提到 Nebular 的其中一個缺點就是 沒有格線系統 ,需要另外安裝套件或是自行設計。 這是一個缺點,但並非致命的缺點,不可克服或解決。 以下是兩個解決...
好的,今天開始我們就要用牛刀來殺雞。首先第一件事當然就是先準備牛刀,不過這個牛刀整支都在 npm 上,所以拿牛刀之前我們還需要先裝 Node.js。請直接透過傳...
介紹完引入路徑在 @schematics/angular/utility 底下的 API 之後,接下來要介紹給大家的 API 是引入路徑在 @angular-d...
相較於Part1只佈署dist資料夾,這次要說明如何佈署整個Angular專案。 執行npm i angular-cli-ghpages安裝angular-...
了解 相依注入 Service 有時我們需要再多個components共享資料,例如上圖的 Applcation 架構中,想要共用LogService 以及U...
如有需要動態驗證、動態產生表單和比較複雜類型的表單狀況,使用 Reactive Form 處理應當會比 Template-Drive Form 好解決. 匯入...
經過這兩天的介紹,相信大家對於 Cypress 應該已經有了一定程度的理解,有沒有人已經開始用它來寫測試了呢? 今天就讓我帶著大家用 Cypress 來為我們...
昨天幫我們用 Reactive Forms 所撰寫的登入系統寫完單元測試之後,今天則是要來為它寫整合測試。 再次幫大家複習一下整合測試的測試目標: 整合測試...
前言 GitLab 最初是 MIT 授權的免費開源軟體。現在則有 GitLab CE(社群版) 和 GitLab EE(企業版),而兩者的核心程式碼是相同的,但...
為什麼使用rxjs RxJS是一組可以用來處理非同步、以及同步事件的一個JavaScript Library 能幫助你快速地使用像是Ajax、Server W...