开启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实例