Angular

標籤 (共 93 篇文章)

[Angular 大師之路] Angular 應用程式啟動過程

任何程式要能夠運作,都應該有它的進入點,以及整個程式啟動的流程,今天我們就來看看,到底一個 Angular 應用程式是如何開始啟動的吧!

繼續閱讀
[Angular 大師之路] 更加理解 Angular CLI 之 Monorepo 應用

Angular CLI 基本上已經成為開發 Angular 應用程式的標準配備了,我們會透過 Angular CLI 建立專案、檔案骨架,或是用來執行以及打包應用程式,以及運行測試等等。透過 Angular CLI 可以減少許多開發時期以及執行程式的前置準備時間成本,讓生活變得更加美好!

而到了 Angular CLI 第 6 版後,多了非常多和過去不同的設定,雖然在常用的功能體驗上完全沒有不同,但卻有了更多可以調整的地方,今天就來更加深入理解 Angular CLI 的相關指令、設定與應用吧。

繼續閱讀
[Angular 大師之路] 開場閒聊

使用 Angular 作為前端開發框架也有兩三年的時間了,這段時間深深能體會到 Angular 是一個非常強大且易學的框架,只要是有點經驗的開發人員,在閱讀過官方的 Tutorial 文件 8 篇文章後,都能夠解決掉大部分的前端需求。

而這次的鐵人賽系列文,則是希望能分享 Tutorial 8 篇文章以外的更多技巧,這些知識可能在官方文件都找得到,也可能是個人的一點經驗;而些知識儘管在平常不一定會使用到,但在適當的時機,卻能幫助我們以更簡潔的程式碼來解決更複雜的問題

繼續閱讀
[Angular 進階議題] Angular Elements 簡介

Angular 6正式推出了Angular Elements的功能,讓我們可以將Angular元件轉換成標準的Custom Elements功能,在任何其他的HTML頁面中使用,這代表著Angular的應用範圍可以延伸到各種web應用去了!就算團隊中習慣用的是jQuery,我們也能夠把複雜的功能專換成Custom Elements,並且直接用在使用jQuery或其他靜態網站中,非常的方便!!

今天我們就來簡單看看如何使用Angular Elements,以及實際把它運用到一般的HTML頁面,來學習理解Angular Elements的強大吧。

繼續閱讀
[Angular Material 完全攻略] Angular Material 6之快速安裝篇

Angular Material 6 在今天 (2018/05/04) 正式登場,從 Angular 本身、Angular CLI 到 Angular Material,全部都一次推出第 6 版!這個版本除了對齊版號以外,也投下了非常多驚人的震撼彈,許多都是跟程式架構與產生(schematics)有關!原本的安裝或升級都能夠藉此架構大幅節省心力,今天就讓我們看看,從 Angular 6 與 Angular Material 6 之後,要使用 Angular Material 到底變得有多簡單吧!

繼續閱讀
[RxJS] rxjs-spy:RxJS除錯神器

rxjs-spy,是一款專門用來除錯RxJS的套件,透過rxjs-spy,我們可以很輕易的在網頁執行階段理解每一步operator的動作,同時調整現有的observable,來驗證不同邏輯帶來的結果,最棒的是,整個過程幾乎不用動到原來的程式碼,可以說是非常方便的一款library,今天我們就來看看這個神奇的RxJS除錯神器-rxjs-spy吧!

繼續閱讀
[Angular 進階議題]使用Docker測試Angular專案(包含Unit Test與E2E Test)

透過Docker來執行或測試Angular專案是一種值得考慮的做法,我們可以將整個專案可能需要的環境等等包裝成一個Docker image,來使用一致環境去執行與測試,也能避免污染到本機上的環境。

要使用Docker執行Angular專案其實並不難,使用包含node及npm的乾淨image即可,但在進行測試上則需要調整一些細節,今天就來看看該如何在Docker上測試Angular的專案吧!

繼續閱讀
[Angular Material 完全攻略]環境設定 & 安裝 & Hello World

今天我們將開始正式邁入Angular Material的世界,要學習使用Angular Material打造高品質及高質感的網頁,當然要從安裝Angular Material套件開始,本篇文章就來介紹基本的Angular Material安裝步驟,並簡單加入一個元件來體驗一下有質感是怎樣的一個感覺!

繼續閱讀
[Angular Material 完全攻略]開始 & 簡介

從Angular第2版正式release後,根據全球最大工程師討論區StackOverflow的統計,從2016開始的Angular討論度就不斷竄升,甚至超越了React,直到了2017年,甚至擺脫了前一代Angularjs的陰影,躍升成為最熱門的前端議題!可以見得Angular這個前端框架確實具有它值得學習的地方,而在2017年底Angular正式邁向第5版,隔天Angular Material就從breaking changes不斷的beta版正式升到趨於穩定的rc版,沒幾個禮拜就直接正式release了!

一個是由Google推出的前端框架,一個是由Google推出的設計語言的Angular實作,兩者結合想必能加乘產生N倍以上的爆發力!接下來的日子,我們將一步一步地學會所有Angular Material的元件及特性、Angular CDK及一些進階的技巧,今天第一天就讓我們以比較輕鬆的節奏來認識所有的基礎知識吧!

繼續閱讀
[Angular 進階議題]使用HttpInterceptort為HttpClient Request打點前後大小事

在實際進行專案的時候,Angular內建的HttpClient其實常常是不符合需求的,因為我們可能會需要為每次的HttpRequest都加上一樣的Header,或針對HttpResponse要有一致性的處理,如果同樣的動作在每次Request都進行的話,只會產生一堆同樣的程式碼,既不美觀也容易出錯,好在Angular提供了HttpInterceptor來幫助我們在Reqquest前主動幫我們處理好各種事情!

繼續閱讀