<!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>
运行结果