AngularJS - 第一个应用程序

在创建实际的Hello World 之前！使用 AngularJS 的应用程序，让我们看看 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 都会使用显示在 HTML <span> 标记中的名称模型。
结束</div>标签表示AngularJS应用程序的结束。