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 应用程序开发者提供了从简单到复杂的应用程序开发环境。

AngularJS Bootstrap AngularJS ng-model 指令