📌  相关文章
📜  AngularJS-第一个应用程序

📅  最后修改于: 2020-10-27 02:48:23             🧑  作者: Mango

在创建实际的Hello World之前！使用AngularJS应用程序，让我们看看AngularJS应用程序的各个部分。 AngularJS应用程序包含以下三个重要部分-

  • ng- app-此指令定义AngularJS应用程序并将其链接到HTML。

  • ng- model-此指令将AngularJS应用程序数据的值绑定到HTML输入控件。

  • ng- bind-该指令将AngularJS应用程序数据绑定到HTML标签。

创建AngularJS应用程序

步骤1：加载框架

作为纯JavaScript框架，可以使用

步骤2：使用ng-app指令定义AngularJS应用


   ...

步骤3：使用ng-model指令定义模型名称

Enter your Name:

步骤4：绑定使用ng-bind指令定义的上述模型的值

Hello !

执行AngularJS应用

在HTML页面中使用上述三个步骤。

testAngularJS.htm

现场演示
AngularJS First Application
   
   
   
      
Sample Application

      
      

         
Enter your Name: 

         
Hello !

输出

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

AngularJS如何与HTML集成

  • ng-app指令指示AngularJS应用程序的启动。

  • ng-model指令创建一个名为name的模型变量，该变量可以与HTML页面一起使用，并且可以在具有ng-app指令的div中使用。

  • 然后，每当用户在文本框中输入输入内容时，ng-bind就会使用名称模型显示在HTML 标记中。

  • Closing 标记指示AngularJS应用程序结束。