AngularJS - 第一个应用程序

欢迎，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，进入AngularJS的世界。作为你友好的邻居计算机老师，我很高兴能引导你完成你的第一个AngularJS应用程序。如果你以前从未写过一行代码，也不用担心——我们会一步一步来，在你意识到之前，你将能够像专业人士一样创建动态的Web应用程序！

AngularJS - First Application

创建AngularJS应用程序

让我们从基础开始。AngularJS是一个强大的JavaScript框架，帮助我们构建交互式Web应用程序。把它想象成一个神奇的工具箱，让我们的网页变得生动起来！

要创建我们的第一个AngularJS应用程序，我们需要设置一个简单的HTML文件。它看起来是这样的：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS应用</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>你好，{{name}}！</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS初学者';
});
</script>
</body>
</html>

让我们分解一下：

我们从一个标准的HTML结构开始。
<html>标签中的ng-app="myApp"告诉AngularJS这是我们的应用程序的根元素。
我们在<head>部分使用<script>标签包含AngularJS库。
在<body>中，我们有一个带有ng-controller="myCtrl"的<div>。这把我们的HTML连接到一个AngularJS控制器。
在这个<div>内部，我们有{{name}}。这是一个AngularJS表达式，将显示name的值。
最后，我们有一个<script>标签，在那里我们定义我们的AngularJS模块和控制器。

执行AngularJS应用程序

现在我们已经创建了我们的应用程序，让我们看看如何运行它：

将上面的代码保存在一个名为index.html的文件中。
在Web浏览器（如Chrome或Firefox）中打开这个文件。

就这样！你的AngularJS应用程序现在正在运行。这比你想象的要简单吧？

输出

当你在浏览器中打开index.html文件时，你应该看到：

你好，AngularJS初学者！

魔法，对吧？但是这是怎么工作的？让我们深入研究！

AngularJS如何与HTML集成

AngularJS通过我们称之为“指令”的东西无缝地与HTML集成。这些是指示AngularJS对DOM元素执行某些操作的特殊属性。让我们看看我们使用的主要指令：

指令	目的
ng-app	定义AngularJS应用程序的根元素
ng-controller	指定HTML元素使用哪个控制器
{{ }}	显示表达式的值

以下是一个更详细的解释：

ng-app：这个指令初始化一个AngularJS应用程序。它告诉AngularJS它应该控制页面的这部分。在我们的例子中，我们把它放在<html>标签上，使我们的整个页面成为一个AngularJS应用程序。
ng-controller：这个指令指定一个JavaScript控制器类。控制器是我们定义应用程序行为的地方，通过定义函数和值。在我们的例子中，myCtrl是我们的控制器。
{{ }}：这些双大括号是AngularJS表达式。它们告诉AngularJS计算括号内的表达式，并用结果替换它。在我们的情况下，{{name}}被替换为"AngularJS初学者"。

现在，让我们看看我们的JavaScript代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS初学者';
});

angular.module('myApp', [])创建一个新的名为'myApp'的AngularJS模块。这与我们在ng-app="myApp"中使用的名称相匹配。
app.controller('myCtrl', function($scope) { ... })定义了我们的控制器。$scope是一个特殊对象，作为控制器和视图（我们的HTML）之间的桥梁。
$scope.name = 'AngularJS初学者'在$scope上设置了一个属性。这就是我们能在HTML中使用{{name}}的原因。

就这样！你已经创建并理解了你的第一个AngularJS应用程序。这不是很激动人心吗？

记住，学习编码就像学习一门新语言。一开始可能看起来很令人困惑，但随着练习，它会变得习以为常。当我第一次开始教AngularJS时，我有一个学生被所有的大括号弄得很困惑，他开始称它为“大胡子语言”！但是课程结束时，他正在创建复杂的应用程序，并且对他最初的困惑感到好笑。

所以，如果一切都不立即清晰，请不要担心。继续练习，尝试修改代码（如果你把'AngularJS初学者'改为你的名字会怎样？），最重要的是，享受乐趣！在我们的下一课中，我们将探索更多AngularJS功能，并开始构建更复杂的应用程序。在此之前，快乐编码！

Credits: Image by storyset