Java is always EExcellent: 2014/10/1

2014年10月30日星期四

AngularJS 教學 - Service 測試

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

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

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

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

<head>

</head>

<body>

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

</div>

</body>

</html>

2014年10月27日星期一

AngularJS 教學 - Controller 測試

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

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

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

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

以下是 index.html 的範例程式

<head>

</head>

<body>

Counter : {{counter}}<br/>

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

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

</div>

</body>

</html>

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

2014年10月25日星期六

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

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

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

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

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

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

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

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

包括 QUnit、Mocha、Jasmine 等等

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

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

2014年10月23日星期四

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 資料夾被移除了

2014年10月6日星期一

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 的安裝與使用

網頁

2014年10月30日 星期四

AngularJS 教學 - Service 測試

2014年10月27日 星期一

AngularJS 教學 - Controller 測試

2014年10月25日 星期六

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

2014年10月23日 星期四

Grunt 教學 - 檔案管理(1)

2014年10月6日 星期一

Grunt 教學 - Getting Started

2014年10月30日星期四

2014年10月27日星期一

2014年10月25日星期六

2014年10月23日星期四

2014年10月6日星期一