Angular | The Will Will Web

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

離線安裝完整 Angular 開發環境的標準作業流程 (大型企業適用)

這兩個月經常在新竹科學園區進行 Angular 企業內訓,有越來越多的企業意識到 Angular 帶來的高價值(High Value)與低總體成本(Low TCO)。不過,在高度資安的防護下,我經常需要協助學員「離線安裝」完整的 Angular 開發環境,而且必須在「無管理員身分」的權限下進行安裝。雖然我已經寫了不少相關文章,但環境設定上還是沒甚麼效率。今天這篇文章,我特地整理詳細的設定步驟,幫助大家更順利的設立 Angular 開發環境。

... 繼續閱讀 ...

Angular 結合 nginx 反向代理的 Docker 容器化封裝技巧

在微服務架構下,部署 Angular 應用程式與後端 Web API 應該切割成兩個不同的微服務。但具體的實現方式,通常會透過容器化技術來達成,實作上相對容易許多。像我們公司的特定專案,就是透過 Kubernetes 叢集化技術來實現這個目的。這篇文章,我將分享如何將 Angular 這類 SPA 框架,如何透過 nginx 反向代理與 Docker 容器化技術,徹底做到微服務化。將前後端分離的結果,可以幫助我們簡化 CI/CD 流程,同時降低系統之間的耦合性。

... 繼續閱讀 ...

前端工程研究:如何在企業內部使用「完全離線」的方式安裝 npm 套件

許多企業在設法導入前端工程的過程中,最大的進入障礙竟然是「無法使用 npm 安裝套件」。因為真的有很多企業在嚴格執行資訊安全政策的情況下,所有開發者都無法從公司內部環境連到 npm 網站下載套件。這篇文章,我將分享幾個小技巧,幫助企業開發人員可以在內部實現簡易的 npm 離線快取。

... 繼續閱讀 ...

如何在 Angular CLI 建立 proxy.config.json 轉發呼叫遠端 RESTful APIs

最近開辦了許多 Angular 2 訓練課程,許多學員都有提到一個問題,就是如何讓我們現有的 ASP.NET MVC 5 網站跟 Angular 2 整合在一起。這個問題有個很簡單的回答:不要在開發時期整在一起,部署的時候放在一起就好!但是 Angular 2 網站在開發的過程中要怎樣才能成功呼叫我們用 ASP.NET MVC 或 ASP.NET Web API 寫好的 RESTful API 呢?本篇文章將介紹一個鮮為人知的「內建功能」,可以讓你在開發時期就可以很方便的呼叫任意遠端任意 HTTP API 介面。

... 繼續閱讀 ...

如何將 Angular 2 含有路由機制的 SPA 網頁應用程式部署到 IIS 網站伺服器

這幾個月以來,我們一直在利用 Angular 2 建構一個還不算小的入口網站,網站前端用的是 Angular 2 框架,後端用的是 ASP.NET Web API 2 框架,還好有 Angular 2 這樣一個優雅又完整的框架,讓我們整個前端團隊不分資深或資淺,大家都可以順利分工合作。如今網站即將上線,進入了要部署的時間點,原本在 Angular CLI 提供的開發伺服器上,程式都跑得好好的,但部署到 IIS 卻發生了網址路由的問題,除了首頁以外的頁面都會顯示 HTTP 404 Not Found 的錯誤,這該如何是好呢?本文告訴你如何解決!

... 繼續閱讀 ...

Angular 2 開發心得分享 (01):使用 HTML 自訂元素的注意事項

使用 Angular 2 開發網站跟以前 Angular 1 最不一樣的地方在於「網頁元件化」的觀念,網頁中所有看到的東西都將變成一個個的 directive 元件,當你將現有網頁 HTML 版型變成 Angular 2 的 Directive 元件後,Angular 2 執行時會把這些 HTML 片段編譯過,並且找出這些 HTML 片段中是否含有其他的 Directive 元件,如果有找到,就會初始化這個 Directive 元件。不過當你的 HTML 版型中有用到「自訂的 HTML 元素」或「寫錯的 HTML 元素」,執行時期就會立刻發生錯誤,這問題發生的原因與解決方法,將是本文討論的重點。

... 繼續閱讀 ...