close


最近會開始接觸到AngularJS的東西，所以會順手把書上學到的內容筆記上來
才不會學一學以後忘記又得重學 ...

這邊會以一個Hello World的範例來介紹AngularJS，主要會用到下面幾個AngularJS提供的directive
ng-app
ng-model
ng-bind

範例程式碼如下:
angularJShelloWorld.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello AngularJS World</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body ng-app>
        <input type="text" ng-model="name" placeholder="Please enter your name"><br />
        Hello, <span ng-bind="name"></span> <br />
        Welcome to AngularJS world !
        <script 
            src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
        </script>    
    </body>
</html>

1. ng-app 是用來限縮angularJS的應用範圍，以這邊的例子來說，只有在body標籤內的內容才會讓angularJS生效
2. ng-model 是用來定義angularJS所使用的model變數
3. ng-bind 為angularJS所提供的雙向資料綁定，這邊綁定了name這個model變數，
    當該變數內容有所變動時，這邊顯示的變數內容也會自動更新

呈現畫面如下:


輸入資料中:


輸入資料後:

可以看到雙向綁定的資料內容會隨著model變數的內容自動更新
另外，

<span ng-bind="name"></span>

的寫法也可以簡單以 {{name}} 的方式撰寫，一樣可以達到雙向資料綁定的效果
<補充>
AngularJS會將雙大括號中的表示是直接放到ng-bind中，然而在效能上
會以直接使用ng-bind較佳 (省去AngularJS尋找跟替代雙大括號語法的時間)

參考資料:
1. 「AngularJS 建置與執行」

 

arrow
arrow
    文章標籤
    AngularJS HelloWorld 讀書筆記
    全站熱搜

    allen0818 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄