开启 AngularJS 之旅

开始创建一个 AngularJS 应用从来没有这么容易过，但在讲解之前，让我们花一些时间来回答几个简单的问题以帮你决定 AngularJS 是不是你想要的框架。

需要什么后台？

我们通常得到的第一个问题是需要什么类型的后台来编写 AngularJS 应用。答案很简单：没有特殊要求。

AngularJS 没有设定需要什么特定后台工作来设计单页面应用。你可以自由使用 Java、Python、Ruby、C#、或任何其他你喜爱的语言。你唯一需要的就是一种与服务器相互通信的方式。理想情况下，将通过 XHR(XML HTTP 请求)或套接字来完成。

如果你服务器提供 JSON 格式的 REST 或 API 服务，这会让前端开发人员的生活更轻松。即使你的服务器并不返回 JSON，这并不意味着你应该放弃 AngularJS。AngularJS 与 XML 服务器，或任何其他格式通信也很简单。

我的整个应用都需要使用 AngularJS 吗？

一个字，不。AngularJS 有一个概念称之为 ng-app(从技术上讲，它是一个指令，<我们会在下一节讲述)。它允许您使用标签标注任何已有的 HTML 元素(而不仅仅是<html>或<body>标签)，并告诉 AngularJS 只允许作用、控制和修改 HTML 的特定部分。这一点让它很容易从一小部分现有应用程序开始，然后随着时间的推移逐渐增多 AngularJS 控制的部分。

一个基本的 AngularJS 应用

最后让我们通过代码来讲解。我们将从最基本的开始 AngularJS 应用，引入 AngularJS 库并证明 AngularJS 引导起作用了：

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <title>一个基本的 AngularJS 应用</title>
</head>
<body>
  <h1>Hello {{1 + 2}}</h1>
  <script src="https://cdn.jsdelivr.net/angularjs/1.2.28/angular.min.js"></script>
</body>
</html>

点击此处查看效果。

一个简单的 AngularJS 应用至少包括以下两个部分：

加载 AngularJS 源码

此处我们直接从我的网站引用 AngularJS 精简版本库，你也可以有自己的托管的本地版本。谷歌 CDN 主机托管了 AngularJS 的所有最新版本，您可以从 AngularJS 网站直接引用它，从https://angularjs.org下载到本地再引用。

我们建议在开发的时候使用 AngularJS 常规版本库，这样方便你调试应用程序。因为现在国内需要翻墙才能访问谷歌，建议你使用本地版本或国内可以稳定访问的 CDN。

引导 AngularJS

通过 ng-app 指令来完成。它是 AngularJS 第一个也是最重要的指令，表示 AngularJS 可以控制哪部分 HTML。把它放在<html>标签上，表示 AngularJS 控制整个 html 应用。我们还可以把它放在<body>或页面任何其他元素上，AngularJS 将处理它们包含的任何子元素并用指令标记，而不会处理元素外部的 HTML。

最后，我们第一次尝试 AngularJS 单向数据绑定。我们已经把表达式“1 + 2”放在双大括号中。AngularJS 双大括号语法表示单向数据绑定或 AngularJS 表达式。如果指向一个变量，它会保持用户界面随值变化同时更新。如果是一个表达式，AngularJS 会评估并保持用户界面随表达式值变化同时更新。如果由于任何原因 AngularJS 没有正确引入，我们就会看到{{ 1 + 2}}显示在用户界面中。如果没有错误就应该在浏览器中看到如下截图。

一个基本的 AngularJS 应用

AngularJS Hello World

现在我们已经了解了如何创建一个 AngularJS 应用，让我们创建的传统 “hello world”应用程序吧。实例中我们将有一个文本输入框，允许用户输入他们的用户名。当用户输入时，我们将用最新值更新文本输入框。听起来很复杂？让我们看看如下代码：

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <title>AngularJS Hello World</title>
</head>
<body>
  <input type="text" ng-model="name" placeholder="Enter your name">
  <h1>Hello <span ng-bind="name"></span></h1>
  <script src="https://cdn.jsdelivr.net/angularjs/1.2.28/angular.min.js"></script>
</body>
</html>

点击此处查看效果。

我们已经为上一个实例添加了两样新东西，并保留了旧有的两样东西：

-- AngularJS 源码还是一样的。ng-app 指令已经移到<body>标签中。

-- 我们用到一个输入标签和一个 ng-model 指令。任何时候我们希望用户输入任何数据并获取 JavaScript 变量值，将 ng-model 指令和输入文本输入框一起使用就行了。此处我们告诉 AngularJS 将用户在文本框的输入值存储在 name 变量中。

-- 我们还用到另一个名为 ng-bind 的指令。ng-bind 与双大括号是可以互换的，所以<span ng-bind="name"></span>，我们本可以写成{{name}}。它们做同样的事情，把 name 变量值放在标签中并保持最新变化。

最终效果如下截图所示：

AngularJS hello world 实例