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

不完全译自《AngularJS-Up and Running》。

发表评论