使用 Angular cli 工具好處就是可以節省許多環境面的設定 (如 TypeScript 轉譯、Webpack 打包、程式最小化等)
讓我們能夠專注於業務邏輯的撰寫

不過也因為所有程式會被 Webpack 打包成 main.bundle.js，在除錯時較不容易找到自己撰寫的程式碼 (via Ctrl + F 搜尋)
還好 Webpack 在打包時會產生 source map，以方便程式設計師可以對應原本程式碼

Read More

在 使用 SpringBoot 建立 RESTful 程式 時，有建立了一個簡單的 SpringMVC 程式，但是打包出來的結果是 jar 檔，接下來就是將其打包成為 war 檔，使得能夠佈署在我們現有的 Servlet Container 上

加入 Spring Boot Maven plugin

Spring Boot Maven plugin 讓 Maven 能夠支援 SpringBoot，使 SpringBoot 專案能打包為可執行的 jar 檔或 war 檔

Read More

在 使用 SpringBoot 建立 RESTful 程式 及 Angular 呼叫遠端 API 已經分別完成開發時期前後端串接， 接下來是透過 Maven Plugin 將前後端程式打包再一起。

不過為了增加程式的真實性，先加入兩個頁面以驅動 Angular 路由機制 (可參考 透過 Angular 路由建立 SPA 網站)

Read More

程式碼範例 Angular-SpringMVC-Integration

建立 Angular 專案及頁面元件

1. 透過 Angular CLI 建立專案 ng new SampleProject --routing
--routing 加入路由機制，會自動建立 app-routing.module.ts
2. 透過 Angular CLI 建立元件 ng g c pages/page1 --spec false 及 ng g c pages/page2 --spec false 在 pages 下建立兩個 Component
3. 修改 app-routing.module.ts 設定路由

   Read More

Angular 內建的 Http 可幫助我們呼叫遠端 API，
搭配 Angular CLI 工具更可以快速建立 Angular 開發環境，由於前後端會分別開發 (不是說 Eclipse 不好用，是 VSCode 真的太好用…XD)
因此我們可以透過內建的 proxy 機制，幫助我們在開發時期呼叫遠端 API

Read More

在開始之前，必須先了解 SpringBoot 是用來做什麼的，我覺得這篇 Blog 比喻得滿生動的XD Introduction to Spring Boot
如果 SpringFramework 是提供原物料(如雞蛋、砂糖、麵粉等)，開發人員還必須自己組裝(而且每個案子都會先做類似的事情)，
那麼 SpringBoot 就是直接送上蛋糕，把瑣碎重複的事情全部做好 (當然開發人員仍舊可以透過 Java Configuration 或是 設定檔進行客製化)

小弟也是最近案子才開始有接觸 SpringBoot，觀念上若有錯誤還請不吝指教…Orz

Read More

※ 本文用於備份好用的 Angular VSCode 外掛及加上小弟對外掛的見解，著作權仍屬 http://devboosts.com

Bracket Pair Colorizer

可針對不同的 bracket 加上不同的顏色，我覺得這個不僅用於 Angular，拿來寫 JavaScript 也是很棒的 = ˇ =

Read More

=== 2017-02-19 Updated ===
因原文寫得不夠清楚(其實是之前亂寫一通)，導致錯誤的理解

先補上 MDN 的說明：

Hoisting was thought up as a general way of thinking about how execution context (specifically the creation and execution phases) work in JavaScript.
For example, hoisting teaches that variable and function declarations are physically moved to the top your coding, but this is not what happens at all.
What does happen is the variable and function declarations are put into memory during the compile phase, but stays exactly where you typed it in your coding.

Read More

這篇是上完保哥的《JavaScript 開發實戰：核心概念篇》筆記之一 (狀態顯示為拖稿)

開始之前可以先看看 Stack Overflow 上這篇 Is JavaScript a pass-by-reference or pass-by-value language?

看完程式碼好想有點感覺，但真相是仍舊什麼都不懂 (￣□￣|||)a

以下就用保哥嫡傳畫圖理解來做說明 ㄟ(￣▽￣ㄟ)

Read More

常常在寫 JavaScript 時，會想知道效能到底好不好之類的

最直覺的方法就是測 JavaScript 執行時間

開始之前先寫個假裝讓 JavaScript 執行很久的 sleep 函式

1
2
3
4

function sleep(seconds) {
    var e = new Date().getTime() + (seconds * 1000);
    while (new Date().getTime() <= e) { }
}

Read More