AngularJS簡介，以及和現有網站的漸進式整合：如何從DOM更新資料給AngularJS

最近在保哥的部落格看到AngularJS的大力推薦，
雖然最近內部網站開發的事情已經忙的不可開交，但看了官網介紹後忍不住要偷偷地試用一下。

簡單的介紹一下，AngularJS提供了一個雙向的data-binding。
只要在html碼中註記什麼地方要使用哪個變數，從此兩者就互相同步更新，不需要寫任何代碼
這樣的好處是什麼呢？就是從不用再寫一大堆這種東西

var some_value;

some_value = $("#aaa").val(); //for reading
$("#aaa").val(some_value);    //for writing

在AngularJS只要這樣，資料就建立了雙向繫結，從此不用寫一堆code囉

<input id="aaa" ng-model="some_value"/>

另外一個好處，就是他的設計原則是強制做資料、代碼分離，這個比較抽象

詳細資料還請看AngularJS官網，也可以去保哥的部落格看看介紹

AngularJS很好很強大，但我該怎麼應用在現有網站呢？

以我現在正在開發的網站為例，雖然很想體驗一下AngularJS的威力，但我已經有一個現有的javascript資料讀寫系統，，但總不能整個打掉重寫吧。以下先假設讀者已經把AngularJS網站教學跑過一遍，稍微有點熟悉了。

其實最主要的，就是要把資料傳給AngularJS的scope，之後用AngularJS做的部份就可以使用該資料了。這邊假設我原有系統存在一個SelectedId變數，並且根據使用者選取而改變，但是這是一個普通的JavaScript變數，無法在AngularJS的code中直接存取，也不提供data-binding功能，那麼只要我再更新這個值的時候，執行以下程式

$("html").scope().$apply(function (scope) {

            scope.SelectedId = SelectedId;

        });

之後就可在AngularJS的scope中使用SelectedId 囉