AngularJS HTML DOM
AngularJS HTML DOM
介绍
AngularJS 是一个由谷歌创建的 JavaScript 框架,它极大地简化了 Web 应用程序开发的过程。AngularJS 将 DOM 作为操作数据的起点。在 AngularJS 中,HTML 元素被绑定到 JavaScript 对象。这使得 AngularJS 能够监听 DOM 已有事件并执行适当的操作。
ng-app
ng-app
指令被用来定义一个 AngularJS 应用程序。ng-app
应该在 Web 页面的根元素上定义,例如 <html>
或 <body>
标签。这个指令的值应该是应用程序的名称。
例:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS HTML DOM</title>
</head>
<body>
...
</body>
</html>
ng-model
ng-model
指令将表单元素的值与应用程序数据模型绑定。当表单元素的值发生变化时,应用程序数据模型也会随之而变化。
例:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="firstName">
<h1>{{firstName}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
});
</script>
在这个例子中,输入框的值和 h1
元素中的文本都被绑定到 $scope.firstName
变量。当输入框中的值发生变化时,文本中的值也会随之变化。
ng-repeat
ng-repeat
指令用于循环。它可以重复一个 HTML 元素多次,并在重复中添加不同的数据。
例:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["John", "Mary", "Tom"];
});
</script>
在这个例子中,li
元素会重复三次, 并依次输出 John
、Mary
、Tom
。
ng-click
ng-click
指令用于在单击事件中触发 AngularJS 函数。
例:
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="alert()">Click Me!</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.alert = function() {
alert("Hello World!");
}
});
</script>
在这个例子中,当用户单击按钮时,alert()
函数就会被调用。
总结
通过使用 AngularJS,我们可以更好地控制 HTML DOM,并使用关系型数据库操作数据。AngularJS 为 Web 应用程序开发者提供了从简单到复杂的应用程序开发环境。