2014年7月23日 星期三

AngularJS 教學 - provider method

在前兩篇
AngularJS 教學 - factory method
AngularJS 教學 - service method

介紹到了三種建立 service 的其中兩個方法,factory 與 service

最後就要來介紹第三種方法,provider

provider 方法是 AngularJS Module 所提供的一個建立 Service 的方法 (Module.provider)

provider 方法與其他兩個最大的不同在於它能夠對 Service Object 做額外的設定(Configured)

再談到如何做額外的設定之前,我們先來看一個基本的 provider 方法如何使用

var demoApp = angular.module("demoApp", []);
demoApp.provider("echoService", function(){
return {  //It's Provider Object
$get: function(){
            return {  //It's Service Object
               echoCount: 0,
               echo: function(name){
                   console.log((this.echoCount++) + ", Your name is " + name);
               }
            };
        }
}

});

2014年7月21日 星期一

AngularJS 教學 - service method

上一篇 AngularJS 教學 - factory method 講到了 AngularJS 建立 Service 的其中一個方法

如果不知道什麼是 Service 的,可以看 AngularJS 教學 - Service

接下來要介紹的是另外一種建立 Service 的方法,就是 service 了啦!

service方法是 AngularJS Module 所提供的一個建立 Service 的方法 (Module.service)

使用方式跟 factory 方法很像,同樣是傳入兩個參數

分別是 Service 的名稱以及一個建構子(Constructor)

這也是和 factory 方法的差別所在

factory 方法是要提供一個能夠回傳一個 Service Object 的工廠方法

而 service 方法則是要提供一個建構子函式,目的在於 AngularJS 底層會利用 new 這個關鍵子

來建立出你的 Service Object

簡單說就是

2014年7月17日 星期四

AngularJS 教學 - factory method

factory 方法是 AngularJS Module 所提供的一個建立 Service 的方法 (Module.factory)

如果不知道什麼是 Service 的,可以先看看 AngularJS 教學 - Service

使用方式就是利用 Module 的 factory 方法,並傳入兩個參數

分別是 Service 的名稱以及一個能夠回傳 Service Object 的工廠方法 (Factory Function)

以下我列舉了一個範例

var demoApp = angular.module("demoApp", []);
demoApp.factory("echoService", function(){
    var echoCount = 0;
    return {
        echo: function(name){
            return console.log((echoCount++) + ", Your name is " + name);
        }
    };

});

AngularJS 教學 - Service

在上一篇 AngularJS 教學 - Module 提到了 AngularJS 的 Module (模組),接下來要介紹的也跟 Module 有關係

那就是 Service 了,Service 可以把它想做是一個提供某一項服務的物件

至於在開發一個 AngularJS 的應用程式時,到底時麼時候該需要使用 Service 呢?

簡言之,Service 封裝了某一個定功能的實作邏輯,讓你能夠在不同模組之間重覆使用(reuse)

或是這樣的某一特定功能可能比較難融入到 MVC 的架構內

例如應用程式中的 logging 機制,就是一個很典型的 Service 例子

而 AngularJS 的 Module 提供了三個方法(method)來定義你的 Service

分別是 factory、service 以及 provider

這三個方法的結果完全是一樣的,就是一個 Service Object (注意:是一個物件)

而這三種方法的差別其實僅在於 Service Object 的建立與管理的過程

2014年7月13日 星期日

AngularJS 教學 - Module

這篇我介紹一下 Module 在 AngularJS 中扮演的角色,在正式介紹之前

其實在任何一個 AngularJS 的應用程式你都已經有使用到了

沒錯,就是 ng-app 這個 AngularJS 的 Directive,可以看 AngularJS 教學 - 第一個AngularJS App

所以這邊就不再多加解釋 ng-app 了

那我們就來詳細說一下 AngularJS 的 Module:

  • 什麼是 Module
          Module 就是模組的意思,它能夠幫助我們組織整個應用程式的元件(Controller、Model、Filters...)
          因此除了幫助我們更好理解整體架構外,也可以讓整個應用程式的各種元件可以分散在
          正確的 JS 檔案內,並透過 script 標籤載入這些元件,畢竟真實世界中的大型專案,並非
          像我們之前的範例這樣,將所有的 JS 程式寫在 HTML 內。

  • Module 的使用時機
          建議再做任何 AngularJS 的專案時,最好多多利用 Module 的概念去組織你的程式
          除了有上述的優點之外,也可以再多個 AngularJS 的應用中重覆使用(reuse)你的 Module

2014年7月12日 星期六

NodeJS 教學 - Module System

在 NodeJS 教學 - NPM 介紹(1) 文章中介紹了 NodeJS 中的 NPM,能夠幫助開發者下載

安裝與管理第三方的模組(Modules),接下來就介紹一下當你透過 NPM 下載下來一個模組之後

要如何使用它以及如和自己建立一個模組

首先我們來探討一下如何使用一個模組,在你透過 npm install 之後會將該模組下載到

root 底下的 node_modules 資料夾內,而當你在程式內要使用該模組時,我們可以用 require 函式來達成

require 函式接受一個字串的參數,該字串參數指明了你想要載入(loading)的模組

而該模組可以是一個 Core module (例如:http)或是透過 NPM 安裝的第三方模組甚至是你自己的模組!!

1. 我舉一個 Core module 的例子

在 command line 輸入 node 進入 NodeJS 的命令列模式

2014年7月10日 星期四

AngularJS 教學 - Attribute Directives

在  AngularJS 教學 - Element Directives 有提到幾個 AngularJS 中常用的 Element Directives

這些 Element Directive 都是能夠幫助開發者動態地新增或修改 HTML 元素或是 CSS

而接下來要介紹一些蠻常用到的 AngularJS Attribute Directive

Attribute 就是指 HTML 元素中的屬性,像是 disabled、checked

下表列出幾個常用的 Attribute Directive

2014年7月2日 星期三

AngularJS 教學 - 事件處理

本篇說明一下事件處理的方式以及種類,最後在說明 AngularJS 對於 Event 的定義

在 MVC 中的視圖(View),除了需要將資料做呈現之外,另外一個工作就是註冊事件了,

只要是寫過 Javascript 或是 jQuery 或是任何一種 Widget 的套件,都一定會處理這些事件的

例如 Javascript 的 onClick 事件,我們會將 onClick 屬性寫在 button 元素上,並指定一個

callback function 來執行按下按鈕時的處理邏輯,在AngularJS 教學 - Controller and View中有提到

AngularJS 在撰寫這一類的事件處理時,會由 View 負責註冊事件,由 Controller 負責處理

事件的後續邏輯。

以下是從官方網站節錄出來的事件列表,大致上看看就好了
ng-click ng-dblclick ng-change ng-blur ng-focus
ng-keydown ng-keypress ng-keyup ng-submit ng-mousedown
ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup
ng-copy ng-cut ng-paste