[angularjs] 邊做邊學 2 Html bind Html &Html bind JS
1. Html bind Html
Live demo :http://jsbin.com/doguv/1/
說明:
原始碼有注解，看懂直接跳到下一個章節，若看不懂繼續。
<html ng-app>
此段的用意式宣告此份文件(區塊)為angularJS所管轄之文件，也可以宣告在其他TAG底下例如div,只有在這個區塊才會被angular所解譯 。
<h3>Hello {{ name||'Angular' }}</h3>
顯示H3tag且內容為name(透過angular所綁訂)若name為空值則帶入Angular
<input type="text" ng-model="name">
透過ng-model去綁訂name
<script
src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
使用cdnjs所提供的angularJS，也可以逕自到其他有提供JS LIB的地方去撈angular
2. Html bind JS
Live demo :http://jsbin.com/duyip/1/edit
說明:
ng-app=”APP”
意指此份文件為anglurs文件
ng-controller=”countController”
意指這個區塊為countController控制項所控制，一份文件可以有多個控制項每個控制項內容均不交互影響。
var
app = angular.module('App', []);
設定app這個變數去存取html內的ng-app範疇內的資料
app.controller('countController',
function($scope) {
$scope.a = 0;
$scope.b= 5;
});
$scope(類似this)
此段是說設定countController控制項內的內容,
例如設定預設參數a
html使用ng- model1=’a’
js須使用 $scope.a = 5;就可以達到雙向綁訂了
留言
張貼留言