AngularJS Hello World 应用程序：您的第一个示例程序

了解 AngularJS 应用程序强大功能的最佳方式是在 Angular.JS 中创建您的第一个基本程序“Hello World”应用程序。

您可以使用许多集成开发环境进行 AngularJS 开发，下面提到了一些流行的集成开发环境。在我们的示例中，我们使用 Webstorm 作为我们的 IDE。

Webstorm
Sublime Text
AngularJS Eclipse
Visual Studio中

你好，世界，AngularJS

下面的示例展示了在 AngularJS 中创建第一个“Hello world”应用程序的最简单方法。

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

代码说明：

“”ng-应用程序” 关键字用于表示该应用程序应被视为 angular js 应用程序。可以给该应用程序指定任何名称。
控制器用于保存业务逻辑。在 h1 标签中，我们想要访问控制器，该控制器将具有显示“HelloWorld”的逻辑，因此我们可以说，在此标签中，我们想要访问名为“HelloWorldCtrl”的控制器。
我们正在使用一个名为“message”的成员变量，它只是一个显示“Hello World”消息的占位符。
“script 标签”用于引用 angular.js 脚本，该脚本具有 angular js 所需的所有功能。如果没有此引用，如果我们尝试使用任何 AngularJS 函数，它们将无法工作。
“Controller” 是我们实际创建业务逻辑的地方，即我们的控制器。每个关键字的具体内容将在后续章节中解释。需要注意的是，我们正在定义一个名为“HelloWorldCtrl”的控制器方法，该方法在步骤 2 中被引用。
我们正在创建一个“函数”，当我们的代码调用此控制器时，它将被调用。$scope 对象是 AngularJS 中的一个特殊对象，它是 Angular.js 中使用的全局对象。$scope 对象用于管理控制器和视图之间的数据。
我们正在创建一个名为“message”的成员变量，为其分配“HelloWorld”的值，并将该成员变量附加到范围对象。

注意：ng-controller 指令是定义在 AngularJS （步骤 2）并用于定义应用程序中的控制器。在我们的应用程序中，我们使用 ng-controller 关键字来定义名为“HelloWorldCtrl”的控制器。控制器的实际逻辑将在（步骤 5）中创建。

如果命令成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

将显示消息“Hello World”。

AngularJS Hello World 应用程序：您的第一个示例程序

你好，世界，AngularJS

总结一下这篇文章：

注册简报