<!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>
