AngularJS - 初探AngularJS

日期：
隨著網頁技術不斷的提升汰換，
加上Mobile Web Application的興起，
網頁漸漸轉換為SPA(Single Page Application)的型態，
Ajax與JQuery的技術更加廣泛的被應用，
使用HTML呼叫Ajax與JQuery可實現動態網頁的效果，
但用HTML呼叫JQuery實在是太麻煩了，
接下來要介紹的AngularJS簡單的就能夠做出動態網頁。


AngularJS是Google所提供的MVVM Framework，
AngularJS最方便的功能就是它提供了Data-Binding的功能，
簡單的說，
就是使用AngularJS定義一個Model，
當這個Model的值發生改變時，
其他使用到這個Model的元件都會連動跟著改變，
下面直接看簡單的範例就知道AngularJS有多好用了。

 

<!DOCTYPE html>
<html ng-app>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularTest</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body>
    <div>
        <h1>Introduction</h1>
        <p>Hello. My name is {{MyName}}. I am {{MyAge}} years old. I was borned in {{MyPlace}}.</p>
        <label>Name: </label>
        <input type="text" ng-model="MyName"/><br/>
        <label>Age: </label>
        <input type="text" ng-model="MyAge"/><br/>
        <label>Place: </label>
        <input type="text" ng-model="MyPlace"/>
    </div>
</body>
</html>


在上述範例中，
可以發現到有幾點不一樣的地方，
如果要使用AngularJS要先在head區塊中加入Script的網址
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
或者可以直接載下AngularJS的套件包，
然後引用套件包的位置即可。
接著在html tag中間加入ng-app，
瀏覽器解析DOM時遇到ng-app會啟動此AngularJS Application並進行初始化。
我們在TextBox中指定ng-model="ModelName"定義AngularJS的Model，
在介紹文中加入{{ModelName}}就可以和ng-model綁定了。
在AngularJS中，
如果要取得並顯示綁定的Model就要使用{{expression}}，
若要加上filter來調整顯示出的資料就使用{{expression | filter}}。
接下來來看看執行的結果：
參考來源：
AngularJS
邊學AngularJS邊做Todo List (1)




留言

張貼留言