<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 需要angular的代碼必須包裹在ng-app的代碼中 -->
<body ng-app="myApp" ng-controller="DemoController">
<h1>使用angular實現雙邊數據綁定</h1>
<p><input type="text" placeholder="請輸入你的姓名" ng-model="user.name"></p>
<p>hello<strong>{{user.name}}</strong></p>
<input type="button" ng-click="show()">
<script src="./js/Angular.js"></script>
<!-- 第一個參數是這個模塊的名字 第二個參數是模塊所依賴的模塊 -->
<script>
var app = angular.module('myApp', []);
//勇於創建一個控制器
//創建一個控制器 屬於myApp模塊
app.controller("DemoController", function($scope) {
//當控制器執行會自動執行的函數
$scope.user = {};
$scope.user.name = "歌謠";
$scope.show = function() {
console.log($scope.user);
}
})
</script>
</body>
</html>
運行結果
