upgrade angular2 new ngForm ( RC3 )

將 angular2 升至 RC2 後，就出現了一段警告訊息：

*It looks like you're using the old forms module. This will be opt-in in the next RC, and will eventually be removed in favor of the new forms module. For more information, see: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

看來在 RC2 後，ngForm 做了一番修正，需要做一些破壞性的處理，
以下是將舊版 ngForm 升級至新版的步驟：
(目前已升至 RC3 )

1. main.ts 加入：

import { disableDeprecatedForms, provideForms } 
    from '@angular/forms';

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms() ]);

2. component 修改部分：

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgForm, Control}
    from '@angular/common';
...

@Component({ 
    directives: [FORM_DIRECTIVES]
})

修正為：

import {CORE_DIRECTIVES}    from '@angular/common';
import {REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup}
    from '@angular/forms';
...
@Component({
    directives: [REACTIVE_FORM_DIRECTIVES]
})

3. form class 更名，尤其是有用 FormBuilder 做客製化驗證的部分：

REACTIVE_FORM_DIRECTIVES:

• formGroup (deprecated: ngFormModel) 
• formControl (deprecated: ngFormControl) 
• formControlName (deprecated: ngControl) 
• formGroupName (deprecated: ngControlGroup) 
• formArrayName (deprecated: ngControlGroup) 
• FormControl() (deprecated: Control) 
• FormGroup() (deprecated: ControlGroup) 
• FormArray() (deprecated: ControlArray) 
• FormBuilder (same) 
• Validators (same)

4. form control ( input, select...)，需加上 name attribute，
#name="ngForm" 要改為 #name="ngModel"：

<input type="text" class="form-control" required
                           [(ngModel)]="name"
                           ngControl="name"
                           #name="ngForm" />

修改為：

<input type="text" class="form-control" required
                           [(ngModel)]="name"
                           ngControl="name"
                           name="name"
                           #name="ngModel" />

5. ngFormModel, ngControl 修改部分 ( HTML )：

<form #templateForm="ngForm" 
          [ngFormModel]="_form" />
    <input type="text" class="form-control" required
                           [(ngModel)]="TemplateName"
                           pattern="^[a-zA-Z0-9_.\-\u4e00-\u9fa5-\(-\)\s]+$"
                           ngControl="TemplateName" />

</form>

修改為：

<form #templateForm="ngForm" 
          [formGroup]="_form" />
    <input type="text" class="form-control" required
                           name="TemplateName"
                           [(ngModel)]="TemplateName"
                           pattern="^[a-zA-Z0-9_.\-\u4e00-\u9fa5-\(-\)\s]+$"
                           formControlName="TemplateName" />

</form>

6. ngFormModel, ngControl 修改部分 ( typescript)：：

_form: ControlGroup;
constructor(
        @Inject(FormBuilder) fb: FormBuilder
    ) {
        this._addTemplateForm = fb.group({
            TemplateName: ['', Validators.required]
        })
    }

修改為：

_form: FormGroup;
constructor(
        @Inject(FormBuilder) fb: FormBuilder
    ) {
        this._addTemplateForm = fb.group({
            TemplateName: ['', Validators.required]
        })
    }

升級步驟大致如上，希望可以幫助到各位囉！

Arduino - 重量感測器（電子秤）

前一陣子玩了一下 Arduino 測量重量的 sensor，也就是電子秤的原理，
電子秤的原理就是根據金屬受力以後的微弱形變來計算其受力的大小。

透過稱重專用的AD晶片 ( HX711 ) 測量出當前材料所受到拉彎扭的力，
並結合 Arduino 和對應 Library 即可。

HX711晶片：

重量感測器結構：

重量感測器結合木板：

實際操作畫面：(畫面是用較差的木板測試，後來才改用較適合的木板)

使用 jQuery 操作 XML

寫 web 多年，在實作前端 ( javascript ) 與 Server 的溝通總是以 JSON 為主，
從沒想過用 XML 格式進行溝通，
一直覺得在前端 Javascript 操作 XML 是一件痛苦的事，
原來在 jQuery 1.5 就有提供方便的方式查詢與操作 XML，

使用 $($.parseXML(xmlStr)) 轉成 jQuery 物件後，
即可像操作 dom 一樣，瀏覽 xml 囉!
範例如下：(參考官網)

var xml = "",
  xmlDoc = $.parseXML( xml ),
  $xml = $( xmlDoc ),
  $title = $xml.find( "title" );
 
// Append "RSS Title" to #someElement
$( "#someElement" ).append( $title.text() );
 
// Change the title to "XML Title"
$title.text( "XML Title" );
 
// Append "XML Title" to #anotherElement
$( "#anotherElement" ).append( $title.text() );

unable to read data from the transport connection an existing connection was forcibly closed by remote host

今天遇到一案例，
使用 WebClient 下載檔案，
卻拋出以下錯誤訊息：
unable to read data from the transport connection an existing connection was forcibly closed by remote host

解決方式：
在建立 WebClient 前，加入此行，即可
System.Net.ServicePointManager.Expect100Continue = false;

那什麼要將 Expect100Continue 設為 false 呢？
因為 Server 跟 Client 在溝通時，中途會經過很多節點，如 proxy，
但這些節點不一定支援 Expect100Continue 進而拋出此 exception

那 Expect100Continue  又是什麼？
簡單來說是為了減少網路流量所設計的機制，原因如下：( 參考 msdn )

For example, assume the Expect100Continue property is false.When the request is sent to the server, it includes the data.If, after reading the request headers, the server requires authentication and must send a 401 response, the client must resend the data with proper authentication headers.

If this property is true, the request headers are sent to the server.If the server has not rejected the request, it sends a 100-Continue response signaling that the data can be transmitted.If, as in the preceding example, the server requires authentication, it sends the 401 response and the client has not unnecessarily transmitted the data.