AngularJS 第一个应用程序
在使用 AngularJS 创建实际的
Hello World ! 应用程序之前，让我们先看看 AngularJS 应用程序的各个部分。 AngularJS 应用程序由以下三个重要部分组成-
ng-app-该指令定义 AngularJS 应用程序并将其链接到 HTML。
ng-model-该指令将 AngularJS 应用程序数据的值绑定到 HTML 输入控件。
ng-bind-该指令将 AngularJS 应用程序数据绑定到 HTML 标签。
创建 AngularJS 应用程序
第 1 步：加载框架
作为纯 JavaScript 框架，可以使用 <Script> 标签添加。
<script
src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
第 2 步：使用 ng-app 指令定义 AngularJS 应用
<div ng-app = "">
...
</div>
第 3 步：使用 ng-model 指令定义模型名称
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
第 4 步：绑定上述使用 ng-bind 指令定义的模型的值
<p>Hello <span ng-bind = "name"></span>!</p>
执行 AngularJS 应用程序
在 HTML 页面中使用上述三个步骤。
testAngularJS.htm
<html>
<head>
<title>AngularJS First Application</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>
输出
在网络浏览器中打开文件
testAngularJS.htm。输入您的姓名并查看结果。
AngularJS 如何与 HTML 集成
ng-app 指令指示 AngularJS 应用程序的启动。
ng-model 指令创建一个名为 name 的模型变量，该变量可用于 HTML 页面和具有 ng-app 指令的 div。
然后，每当用户在文本框中输入输入时，ng-bind 就会使用名称模型显示在 HTML <span> 标签中。
Closing </div> 标签表示 AngularJS 应用程序结束。
