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 应用程序结束。

AngularJS 指令

AngularJS MVC 架构