<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body ng-app="myApp">
<div>
<!--ng-app指令告诉Angular应该管理页面中的哪一块,在整个页面中只能有一个
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind指令把应用程序数据绑定到 HTML 视图。-->
<p>名字：</p><input type="text" ng-model="name" />
<p ng-bind="name"></p><!--当angular未加载完时不会显示-->
<p>{{name}}</p><!--当angular未加载完时会显示-->
<p>{{1+1}}</p> <!--在{{}}里面计算-->
<!--ng-init指令初始化AngularJs应用程序变量,多个变量以“;”隔开-->
<p ng-init="firstName=‘Jack‘;lastName=‘han‘">
姓名:{{firstName}} {{lastName}}
</p>
<!--HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。-->
<p data-ng-init="firstName=‘Jack‘">
姓名:<span data-ng-bind="firstName"></span>
</p>
</div>
<div>
<!--AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。-->
<div ng-controller="myController">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<!--AngularJS 对象就像 JavaScript 对象-->
<div ng-init="person={firstName:‘Jack‘,lastName:‘han‘}">
<p>姓名:{{person.firstName}} {{person.lastName}}</p>
</div>
</div>
<script src="../Scripts/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.firstName = "peter";
$scope.lastName = "han";
})
</script>
</body>
</html>
时间： 2024-08-06 22:30:21