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>

输出

在 Web 浏览器中打开 testAngularJS.htm 文件。输入你的姓名并查看结果。

AngularJS 如何与 HTML 集成

ng-app 指令指示 AngularJS 应用的开始。
ng-model 指令创建一个名为 name 的模型变量，该变量可以与 HTML 页面和包含 ng-app 指令的 div 一起使用。
然后，ng-bind 使用 name 模型在 HTML <span> 标签中显示，无论何时用户在文本框中输入内容。
关闭 </div> 标签表示 AngularJS 应用的结束。

打印页面