iT邦幫忙

DAY 3
4

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

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller

ng-controller是什麼?

主要用來綁定view(html)和model(js)的連結。

本次範例:

使用ng-controller,建立view和model的關係。

http://jsbin.com/ogecuw/2/edit?html,js,output
AngularJS 是遵循MVC 框架,
HTML屬於view的層面。
而MVC架構中,透過Controller來處理Model和View的綁定。

Model可以在Controller中進行處理,另外有什麼異動時,也會反應到view中,
達到AngularJS的雙向資料繫結 (Two Way Data-Binding)。

而ng-controller是angular 的語法,用來綁定view(html)和model(js)的連結。

ng-controller怎麼用?

例如:

<body ng-controller="TodoCrtl">

(指定名稱為"TodoCrtl"的controller,必須與controllers.js裡的主function名稱相同)

範例中,在model裡面指定變數name的方式為$scope.name,view再透過{{ name }}顯示。

$scope是什麼?

$scope是AngularJS在建立(controller)應用程式時,會產生一個物件,用來代表應用程式的Model。所以我們透過$scope.變數,才能得到變數的(值)位址。

function TodoCrtl($scope) {
    
  $scope.name = "Anna";
 
}

我們在名稱為TodoCrtl的controller裡面,宣告一個名稱為name的變數。
並將變數值指定為“Anna”

<p ng-controller="TodoCrtl">My name is {{ name }}!</p>

接著只要在html裡面指定ng-controller名稱,並輸入{{ name }}

就可以成功了! 開心

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

參考連結:

保哥-前端工程的極致精品: AngularJS 開發框架介紹
http://blog.miniasp.com/post/2013/04/24/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS.aspx

邊學AngularJS邊做Todo List (2) - Todo List 動起來
http://ithelp.ithome.com.tw/question/10095338

jsbin教學: http://www.tuicool.com/articles/eEbAfm

---------------入門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


上一篇
Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
下一篇
Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

1 則留言

0
youngtin
iT邦新手 5 級 ‧ 2013-10-31 15:19:36

超級棒的教學!!學習起來沒壓力,感謝分享!!

我要留言

立即登入留言