iT邦幫忙

DAY 2
6

入門AngularJS筆記與前端領域的學習筆記分享系列 第 2

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model

  • 分享至 

  • xImage
  •  

簡單使用幾個html標籤,完成angularJS基本的雙向綁定。

如何使用?

先來看看Demo

Demo: http://jsbin.com/ogecuw/1/edit
Demo的原始碼:

<html ng-app>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>ng-model</title>



                <p>My name is {{yourName || 'Anna'}}!</p>
                <label>請輸入你的名字,也和大家自我介紹吧! </label>
                <input type="text" ng-model="yourName">

首先,要記得載入Angular library,要不然會沒辦法work。

如何載入Angular library?

在head中,加入angular library 穩定版本

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

然後我們就可以開始進入AngularJS的世界了 :)

  1. 新增宣告語法 ng-app

ng-app是什麼?

是用來宣告angular的範圍。(在DOM載入後,AngularJS就會開始尋找ng-app這個字,找到的話,就會把這頁面當成是AngularJS應用程式。)

ng-app怎麼用?

若是全站使用AngularJS:放在html(或body)裡面。

<html ng-app> 或 <body ng-app>

也可以局部使用AngularJS:如果只是局部需要用到,而非整站,也可以把這個字放在某個應用到AngularJS的div中(例如:div)。

<div ng-app ></div>

  1. 加入ng-model

這邊的範例是在input的標簽內,加入ng-model

                <p>My name is {{yourName || 'Anna'}}!</p>
                <label>請輸入你的名字,也和大家自我介紹吧! </label>
                <input type="text" ng-model="yourName" />







<p>My name is {{yourName || 'Anna'}}!</p>

這邊有一個地方比較特別, 為什麼變數後面要加上|| ?

主要的目的是:如果無法獲得yourName變數的值,就可以預先顯示"Anna這個字串"

好啦! 我們使用ng-app和ng-model就簡單完成綁定的動作啦~開心

Demo: http://jsbin.com/ogecuw/1/edit

---------------入門AngularJS筆記---------------

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196


上一篇
Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
下一篇
Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
系列文
入門AngularJS筆記與前端領域的學習筆記分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言