AngularJS 教學 - Service 測試

本偏簡單介紹該如何測試 Service，並說明該如何在測試中解決依賴注入的問題(Dependency Injection)

如果不太清楚 AngularJS 的測試，可以看　http://programer-learn.blogspot.com/2014/10/angularjs-unit-testing.html

以下是本次範例的頁面，在 Text Box 輸入名子，按下 Button 後，Text Box 的值就會改變

接下來看一下原始碼 (index.html)

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="sampleApp">

     <head>

         <title>Demo</title>

         <script type="text/javascript" src="lib/angular.min.js"></script>

         <script type="text/javascript" src="js/app.js"></script>

     </head>

     <body>

         <div ng-controller="SampleCtrl">

              Name:<input type="text" ng-model="name"/>

              <br/><button ng-click="echo()">Echo</button>

         </div>

     </body>

</html>

AngularJS 教學 - Controller 測試

這篇要簡單介紹一下 AngularJS 中 Controller 的測試該如何實現

以下還是用 Karma + Jasmine 來進行測試，如果不熟悉這些可以先看之前寫的文章 AngularJS 教學 - 單元測試(Unit Testing)

首先先列出我們要測試的範例程式，範例很簡單

頁面上有兩個 Button 負責針對 counter 的值進行遞增或遞減

以下是 index.html 的範例程式

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="sampleApp">

     <head>

         <title>Demo</title>

         <script type="text/javascript" src="lib/angular.min.js"></script>

         <script type="text/javascript" src="js/app.js"></script>

     </head>

     <body>

         <div ng-controller="SampleCtrl">

              Counter : {{counter}}<br/>

              <button ng-click="add()">Increase</button><br/>

              <button ng-click="minus()">Decrease</button>

         </div>

     </body>

</html>

再來是 SampleCtrl 的程式(js/app.js)

AngularJS 教學 - 單元測試(Unit Testing)

本篇先小篇幅介紹如何建構一個 AngularJS 的單元測試

內容很簡單，之後再放上進一步的介紹，包括 Controller、Service、Ajax 等等

單元測試顧名思義就是要能夠確保程式的某個 function 或是部分的程式邏輯是正確的

至於單元測試所帶來的好處就不花時間描述了

不過單元測試除了驗證正確性外其實也是描述了系統的 Spec (Specification)

也就是單元測試中的每一個測試函式就表明了一件 Spec

回歸到 AngularJS 上，目前 JavaScript 領域中有很多單元測試的框架(Testing Framework)

包括 QUnit、Mocha、Jasmine 等等

除了測試框架之外還有所謂的 Testing Runner

例如我們接下來要介紹的 Karma，它不同於 Testing Framework

Grunt 教學 - 檔案管理(1)

本篇會介紹部分 Grunt 如何操作檔案，如果對 Grunt 不熟的可以先看 Grunt 教學 - Getting Started

在使用 Grunt 建構 JavaScript 專案時一定會常常接觸到檔案或是資料夾的整理

或是你想寫一些相關的 Grunt plug-in 時，也會遇到相同的情形

因為篇幅的關係，所已先簡單介紹一下如何建立與刪除資料夾

之後有空再補充其他關於檔案管理的技巧

以下是建立資料夾的 Grunt 程式

module.exports = function(grunt){

     grunt.initConfig({

         file: {

              params: {

                  sampleFolder: "sample"

              }

         }

     });

    grunt.registerTask("createFolder", function(){

         // grunt.config.requires() 會確保 config 有被設定

         // 如下就會確保 file.params.sampleFolder 是有先被設定過的

         // 假如沒有設定會拋出以下訊息

         //   Verifying property file.params.sampleFolder exists in config...ERROR

         //   >> Unable to process task.

         //   Warning: Required config property "file.params.sampleFolder" missing. Use --force to continue.

         grunt.config.requires("file.params.sampleFolder");

         // 利用 grunt.config.get() 來取得 config 的值

         grunt.file.mkdir(grunt.config.get("file.params.sampleFolder"));

    });

}

完成之後在你專案的 root 目錄下執行 Grunt 的指令 $grunt createFolder

結束之後，會在你的專案目錄下看到一個 sample 的資料夾

如果是刪除資料夾的話，就用 grunt.file.delete()，如下所示

grunt.registerTask("deleteFolder", function(){

         grunt.config.requires("file.params.sampleFolder");

         grunt.file.delete(grunt.config.get("file.params.sampleFolder"));

});

所以同樣在你專案的 root 目錄下執行 Grunt 的指令 $grunt deleteFolder

就會發現剛剛建立的 sample 資料夾被移除了

Grunt 教學 - Getting Started

Grunt 是一個 JavaScript Task Runner，這是 Grunt 的官方網站 GRUNT : The JavaScript Task Runner

它真正的目的是讓開發者可以更容易的建構(Build)他們的 JavaScript 專案

在一般的建構過程中，不外乎包含自動化測試、JS 與 CSS 的壓縮或合併、檔案操作等等

而且目前 JavaScript 專案或多或少都會包含很多第三方套件，會讓你的建構過程相當複雜

所以現在 Grunt 也有很多 Contributors 貢獻了很多的 Grunt plug-ins 來改善建構的過程

因此有了 Grunt 與這些 plug-ins 工具之後，勢必能夠改善你的工作效率

接下來就初步介紹一下 Grunt 的安裝與使用

AngularJS 教學 - Java RESTful 範例

在 AngularJS 教學 - $resource service 詳細介紹到如何使用 ngResource 的 $resource service 進行後端的 RESTful 溝通

所以我花點時間打算寫一些 AngularJS RESTful 一個完整的前後端範例

可能想到要用 Java 和 Node.js 作為範例後端吧，所以本篇先提供以 Java 為後端的範例程式吧


以下我用 Todo 作為範例，整個程式我並不會介紹太多，基本的可以先看 AngularJS 教學 - $resource service

先列出專案目錄結構

AngularJS 教學 - $resource service

這篇要來介紹一下 AngularJS 提供的一個 Service，就是 $resource

$resource 讓你能夠容易地和後端的 RESTful Service 做溝通，以便建構出一個 CRUD 的應用

而 $resource 也是建構在 $http 之上，其中 $http 提供了 AngularJS 一個執行 Ajax 的方式

如果對 $http 不熟的可以看 AngularJS 教學 - Ajax、AngularJS 教學 - Ajax(1)

接下來就開始介紹   如何利用 $resource 來與 RESTful Service 溝通


1.準備 angular-resource.js
首先要使用 $resource，需要先額外引入 angular-resource.js 到你的 HTML 內

因為 $resource 並不在原本 AngularJS 核心的 JS 檔案內，所以才需要額外引入 JS 檔

2.一個 Todo REST 範例

URL	Method	Body	Result
/todos	GET	Nothing	Get all Todos
/todos	POST	Todo JSON String	Add a Todo
/todos/:id	GET	Nothing	Get a Todo by id
/todos/:id	PUT	Todo JSON String	Update a Todo
/todos/:id	DELETE	Nothing	Delete a Todo

Passive View vs Supervising Controller

在 MVP (Model View Presenter) 設計模式 中有詳細介紹了什麼是 MVP 設計模式

這篇簡單介紹一下 MVP 中可以運用的兩種變型，分別是 Passive View 與 Supervising Controller

如果想要對這兩種設計模式想更進一步了解可以看看 Martin Fowler大師的介紹

Supervising Controller 、 Passive View

Passive View(PV) 從字面上來看就是"被動的視圖"，簡單說就是 View 只負責顯示，

並由 Controller 或是 Presenter 負責處理使用者的動作 (action)，也就是 View 都是被動的

只能透過 Controller 或是 Presenter 給的命令 (command) 來做事情

採用 PV 的好處是可以讓你容易獨立的測試 Controller 或是 Presenter，而且不需依賴任何 UI 測試框架

但我認為這前提是你的 View 與 Presenter 或是 Controller 的關係要盡量是鬆散耦合的

也就是說當有任何的使用者互動，View 都是發出事件(Event)給 Controller 或是 Presenter

來處理，且送出去的資料盡量都不要跟 View 有任何一點關係

MVP (Model View Presenter) 設計模式

在 GUI 的架構開發中，最顯為人知就是 MVC (Model View Controller) 了

而 MVP (Model View Presenter) 模式也類似於 MVC，從下圖我們可以看到 MVP 與 MVC 的區別

上圖參考於 http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/

AngularJS 教學 - Ajax(1)

上一篇 簡單介紹了 AngularJS 使用 Ajax 的方式 接下來繼續介紹一些 AngularJS 常用的 Ajax 設定

AngularJS 利用 $http 這個 Service 物件做為 Ajax 的一個管道

但是在多數複雜的應用中，我們的 Ajax 請求或回傳可能稍微複雜需要設定一些額外的參數

譬如說 HTTP 的請求表頭、HTTP 的 method(POST、PUT、DELET)之類的

所以以下列出幾個比較常用到的參數設定

首先在上一篇看過一個簡單的 Ajax 方式，如下：

$http.get("todos.json").success(function (data) {

    return data;

});

如果要加上額外的設定，可以類似這樣：

var config = {
    //你的設定參數在這
};

$http.post("/todos", config).success(function (data) {

    return data;

});