AngularJS - 环境搭建

你好，未来的网页开发者们！我很高兴能成为你们在这个激动人心的AngularJS世界中的向导。作为一个教授计算机科学超过十年的人，我可以告诉你，搭建开发环境就像在做饭前准备厨房一样。这可能不是最吸引人的部分，但它对于成功来说至关重要。所以，让我们卷起袖子开始吧！

AngularJS - Environment Setup

AngularJS是什么？

在我们开始搭建环境之前，让我们先了解一下AngularJS是什么。想象一下你在建造一座房子。HTML是基础和墙壁，CSS是油漆和装饰，JavaScript是电和管道。那么AngularJS呢？就像是有一支由专家室内设计师和建筑师组成的团队，确保所有东西无缝地协同工作。

AngularJS是一个强大的JavaScript框架，它扩展了HTML的功能，使得创建动态的单页Web应用变得更加容易。就像是给HTML赋予了超能力！

为什么我们需要一个开发环境？

你可能在想，“我们难道不能直接开始编码吗？”嗯，你可以尝试，但这就好比在没有餐具或厨具的厨房里尝试做五道菜的晚餐。一个合适的开发环境为你提供了编写、测试和运行AngularJS应用程序所需的所有工具。

搭建你的AngularJS环境

现在，让我们开始正题。以下是我们需要做的：

1. 安装Node.js

Node.js就像是我们的开发环境的引擎。它是一个JavaScript运行时环境，允许我们在计算机上运行JavaScript，而不是在网页浏览器中。

访问Node.js的官方网站（https://nodejs.org/）。
下载推荐给大多数用户的版本。
运行安装程序并按照提示操作。

为了检查Node.js是否正确安装，打开你的命令提示符或终端并输入：

node --version

如果安装正确，你应该能看到Node.js的版本号。

2. 安装npm（Node包管理器）

好消息！npm通常会与Node.js一起捆绑。它就像是一个巨大的图书馆，你可以在里面借（或者在这个案例中，下载）预先写好的代码包来用在你的项目中。

为了检查npm是否安装，输入：

npm --version

3. 安装AngularJS

现在，魔法即将发生。我们将会使用npm来安装AngularJS。在你的命令提示符或终端中，输入：

npm install angular

这个命令告诉npm去获取AngularJS包并将其安装在你的计算机上。

4. 搭建一个简单的AngularJS项目

让我们创建一个基本的项目来确保一切正常工作。首先，为你的项目创建一个新文件夹。你可以通过文件浏览器或使用命令行来完成：

mkdir my-angular-project
cd my-angular-project

现在，在这个文件夹中创建两个文件：

index.html
app.js

以下是你的index.html应该看起来像的样子：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS应用</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

而你的app.js应该是这样的：

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});

让我们分解一下：

在index.html中，我们创建了一个基本的HTML结构。
ng-app="myApp"属性告诉AngularJS这是我们的AngularJS应用程序的根元素。
我们使用<script>标签包含了AngularJS库和我们的app.js文件。
<div ng-controller="MainController">将我们的HTML与我们在app.js中定义的控制器连接起来。
{{ greeting }}是一个AngularJS表达式，它将显示我们控制器中的greeting的值。

在app.js中：

我们创建了一个名为myApp的AngularJS模块。
我们定义了一个名为MainController的控制器。
在控制器内部，我们在$scope对象上设置了一个greeting属性，AngularJS使用它来在控制器和视图（我们的HTML）之间传递数据。

5. 运行你的应用程序

要看到你的应用程序的实际效果，你需要一个网页服务器。对于开发目的，你可以使用live-server包。使用npm全局安装它：

npm install -g live-server

然后，在你的项目目录中运行：

live-server

这将启动一个本地网页服务器，并打开你的默认浏览器来显示你的应用程序。你应该会在页面上看到“Hello, AngularJS!”。

结论

恭喜你！你刚刚搭建了你的AngularJS开发环境并创建了你的第一个AngularJS应用程序。这可能看起来步骤很多，但相信我，随着实践，这会变得更容易。记住，每个专家都曾经是个初学者，搭建你的环境是你成为AngularJS大师旅程的第一步。

在我们的下一课中，我们将更深入地探讨AngularJS的概念并开始构建更复杂的应用程序。在此之前，你可以自由地实验你的新环境。尝试更改问候语或者在HTML中添加更多元素。最好的学习方式就是实践！

祝编码愉快，下次课程见！

Credits: Image by storyset