<!DOCTYPE html>
<!-- ng-app說明此頁面使用AngularJS引擎，選擇性引數notesApp，啟動時載入的模組名稱-->
<html ng-app="notesApp">
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8"/>
<!-- 引用AngularJS-->
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<title>Hello
World</title>
<meta charset="utf-8"
/>
</head>
<!-- ng-controller針對目前UI取得伺服器資料、邏輯、呈現給使用者的資料內容、使用者互動-->
<!-- 使用as語法、取代舊版$scpoe作法-->
<body ng-controller="MainCtrl
as ctrl">
<!--使用大括號綁定-->
{{ctrl.helloMsg}}
AngularJS. <br />
{{ctrl.goodbyeMsg}}
AngularJS.<br />
Hello {{1+1}}nd
time AngularJS.<br /><br />
{{ctrl.message}}
AngularJS. <br />
<!-- ng-click按鈕被點擊時觸發事件-->
<button
ng-click="ctrl.changeMessage()">Say
Goodbye!</button>
<script
type="text/javascript">
//model第一個引數是模組名稱、第二個引數是此模組要依賴的一組模組陣列
//第二個引數可以用來定義相依姓內容
angular.module('notesApp',
[])
//controller第一個引數是controller名稱、第二個引數是此controller要依賴的一組模組陣列
//而陣列中的最後一個引數，則是實際的controller函式
.controller('MainCtrl',
[function
() {
this.helloMsg
= 'Hello ';
//無法存取內嵌的區域變數
var
goodbyeMsg = 'Goodbye';
var
self = this;
self.message = 'Hello ';
self.changeMessage = function
() {
self.message = 'Goodbye ';
};
}]);
</script>
</body>
</html>
執行結果：
沒有留言:
張貼留言