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

了解 AngularJS 应用程序的强大功能，最好的方法就是创建您的第一个基本程序“Hello World”应用程序。

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

Webstorm
Sublime Text
AngularJS Eclipse
Visual Studio

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

注意：ng-controller 指令是 AngularJS（第 2 步）中定义的关键字，用于在您的应用程序中定义控制器。在我们应用程序的这里，我们使用了 ng-controller 关键字来定义一个名为 ‘HelloWorldCtrl’ 的控制器。控制器的实际逻辑将在（第 5 步）中创建。

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

输出

消息“Hello World”将被显示。

Hello world, AngularJS

订阅新闻通讯