65.9K
CodeProject 正在变化。 阅读更多。
Home

第一部分：AngularJS 简介

NitinShrivastava
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.84/5 (83投票s)

2014年8月3日

CPOL

9分钟阅读

viewsIcon

169872

downloadIcon

3245

AngularJS 的简要入门教程

引言

最近，我开始学习 AngularJS，发现很难找到一些关于 AngularJS 的优秀详细文章或新手教程。我不得不阅读许多不同的文章、书籍和教程。所以，我决定为像我这样的初学者提供一步一步的帮助，以便他们能从一个单一的渠道获得所需的所有帮助。由于 AngularJS 是一个非常强大的框架，我决定写一系列帖子，帮助那些想使用 AngularJS 学习或开发 SPA（单页应用程序）的初学者。我假设阅读本文的人都了解 HTML 和 JavaScript/jQuery。那么，让我们开始一个简短但详细的 AngularJS 教程，您将能够快速理解 AngularJS 在 Web 世界中的强大功能。

背景

您可能听说过人们谈论 MVC/MVVM/MV*/ MVW (Model View Whatever) 或在其他编程语言中用过它们。虽然 MV*/MVW 并不是 AngularJS 特有的概念，而是一种编程架构方法，它在各种编程语言和环境中都有实现。它取决于架构师如何设计软件的架构，而 AngularJS 提供了用 Model、View 和任何您想要的东西（比如 MVC、MVVM 等）来设计应用程序的便利。有很多主题需要涵盖，我们将在教程的后续部分一一介绍，但在此部分教程中，我仍会尝试让您熟悉至少一些我在这里使用的术语。

那么，让我们先尝试理解 MV* 概念相对于 AngularJS 的含义。

视图

View 在应用程序中实际上是通过浏览器渲染用户可以交互或查看请求数据的部分。在 AngularJS 应用程序中，View 由指令、过滤器和数据绑定组成。但是，为了使 View 简单且易于维护，我们不会将所有代码都放在 View 中。这有助于我们分离代码与视图，也使业务逻辑的测试编写更加容易。

控制器 (Controller)

Controller 在 AngularJS 中包含我们所有的应用程序逻辑。Controller 控制并准备数据，使其能够被渲染到 View 中。从功能上讲，Controller 实际所做的是，它将所有数据收集成可表示的形式，并从 View 中获取数据，在验证后将其设置到 Model 中。Controller 负责与服务器代码通信，通过 Ajax 请求从服务器获取数据，并将来自 View 的数据发送回后端服务器。

Model / View Model / $Scope

MV* 架构中最重要也是最核心的部分是 Model 或 View Model 或 $Scope。$Scope 是 AngularJS 中引入的一个术语，我们将在文章的后续部分更多地讨论它。Model 是连接 Controllers 和 Views 的桥梁。可以有一个 Controller 绑定到两个或多个 Views。假设我们有一个用于用户注册的 Controller，为此，您可以为桌面创建一个不同的 View，为移动设备创建另一个 View。

实际上，Controller 对 View 一无所知，也没有关于 View 的任何信息，同样 View 也独立于 Controller 中实现的逻辑或存在的数据。$scope 作为 Views 和 Controller 之间的通信通道。

上图实际上与我们将在文章后续部分创建的示例应用程序相关。但就目前而言，从这张图片中，您至少可以对 MV* 模式有所了解。

AngularJS 到底是什么？

依我看，AngularJS 与纯 HTML 无异，只是 HTML 的扩展，具有新的属性。AngularJS 是一个 JavaScript MV* 或 MVW 结构化框架，用于动态 Web 应用程序。它由 Google 维护，使您能够开发架构良好且易于维护的 Web 应用程序。AngularJS 使用声明式编程来构建 UI。AngularJS 是客户端的，所以所有这些事情都在浏览器中发生，您将获得独立应用程序的优雅。

为什么要使用 AngularJS？

Web 世界中有许多前端框架，如 Backbone、Knockout、Ember、Spline 等，它们都有各自的优缺点。但由于本教程完全是关于 AngularJS 的，因此出现了一个问题：AngularJS 有何独特之处？ 那么，这是您所有问题的答案。

使用 AngularJS，您需要编写更少的代码，因为它允许您重用组件。此外，它提供了一种简单的双向绑定和依赖注入（我们将在教程的下一部分进一步讨论）。由于 AngularJS 是客户端的，所有这些事情都在浏览器中发生，这让您有独立应用程序（桌面应用程序）的感觉。

我之所以倾向于 AngularJS，或者说 AngularJS 之所以成为现代应用程序架构的选择，原因如下：

  1. 您可以创建一个模板并在应用程序中多次重用。
  2. 您可以以双向方式将数据绑定到任何元素，双向实际上意味着更改数据将自动更改元素，更改元素将更改数据。
  3. 您可以直接在 HTML 中调用代码隐藏代码。
  4. 您可以在提交表单和输入字段之前进行验证，而无需编写一行代码。
  5. 允许您控制完整的 DOM 结构，通过 AngularJS 属性显示/隐藏，更改一切。
  6. AngularJS 允许您编写基本的端到端测试、单元测试、UI 模拟。

总之，AngularJS 提供了构建 CRUD 应用程序所需的所有功能，如数据绑定、数据验证、URL 路由、可重用 HTML 组件，以及最重要的是，依赖注入。

Using the Code

让我们从一个与 AngularJS 无关的纯 HTML 开始。首先，创建一个 HTML 页面，比如 Part1.html，并添加一个带有某些 ID 的 Div。

<html>
  <head>
  <title>AngularJS Tutorial</title>
  </head>
  <body>
    <div id='content'>
    </div>
  </body>
</html>

现在，继续前进，让我们尝试熟悉我将在本教程部分使用的 AngularJS 术语。让我们修改我们的 HTML 页面，并添加 AngularJS 引用到 HTML 页面，您可以从此处下载，或在页面的 head 部分使用脚本引用。在此示例应用程序中，我已经下载了文件并从物理位置引用。此外，我们将添加一些更具体的 AngularJS 指令。

指令只不过是 HTML 标签和属性（我们将在文章的下一部分看到更多关于此的内容）。AngularJS 提供了许多内置指令，如 ng-app、ng-controller、ng-class、ng-repeat 等等。您还可以创建自定义指令，我们将在教程的下一部分学习。这里有一个完整的 API 参考可用于 AngularJS，您可以搜索并获取有关所有指令的信息，或者您可以下载 Angular 备忘单。

<html>
  <head>
  <title>AngularJS Tutorial</title>
    <script src="angular.min.js"></script>
  </head>
  <body>
    <div id='content' ng-app='MyApp' ng-controller='MyController'>
      <h1> {{ article}}!</h1>
    </div>
  </body>
</html>

在上面的代码中，我使用了一些指令 ng-app、ng-controller 和一个分隔符 {{ }}，以便 AngularJS 可以评估表达式。现在，人们会想到，ng-app 和 ng-controller 到底是什么，它们在 AngularJS 应用程序中有什么重要性？

ng-app 是 AngularJS 中最重要的指令。它实际定义了 AngularJS 可以理解的应用程序的作用域，它可以用于 html 标签本身，或者与 div 标签一起使用，如果您希望它将其作用域定义到 div 的范围。我希望将其作用域仅限于 div 部分，这就是为什么我将 ng-app 属性设置为 div。如果您愿意，也可以将其放在 html 标签上。虽然为 ng-app 提供值不是强制性的，但如果您没有任何控制器或模型/视图模型/$scope，您可以将其留空。这里描述的示例应用程序有一个名为 "MyController" 的控制器，我想使用控制器中的数据，所以我们需要为 ng-app 提供值，在这里，我将其设置为 "MyApp"。

这里定义的另一个属性，或者我应该说指令是 ng-controller。ng-controller 指令将一个控制器类附加到视图。它告诉 AngularJS，DOM 元素的控制器名为 "MyController"，并且子 DOM 元素将具有相同的控制器，除非通过 ng-controller 为它们显式指定了新控制器。在此应用程序中，我们有一个名为 "MyController" 的控制器，它附加到 ng-app="MyApp"。

还有第三个东西 {{ }}，我们在纯 HTML 或 javascript/jQuery 中从未见过。{{ }} 是 AngularJS 表达式边界的默认分隔符。在指令和 HTML 属性中必须小心使用它，原因在于 AngularJS 内部如何处理表达式。

让我们继续处理示例应用程序的其余部分，看看接下来需要做什么。我创建了一个名为 "app.js" 的文件，其中包含以下代码：

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

您可以看到这里有些东西，angular.module。Module 就像是您应用程序不同部分（如控制器、服务、过滤器、指令等）的容器。使用模块，您可以将应用程序划分为多个独立工作的部分。在这里，我们将模块分配给一个变量 "app"，它将包含我们的控制器。

现在，再创建一个名为 "mycontroller.js" 的文件，其中包含以下代码：

app.controller("MyController", function($scope)
    {
 $scope.article = "Hello there!!I am learning AngularJS";    
});

这里有一个新术语 "$scope"。 Scope 包含我们需要传递给视图的模型数据。它使用 AngularJS 的双向数据绑定机制将模型数据绑定到视图。

所以，最后，您的 html 页面应该如下所示：

<html>
  <head>
  <title>AngularJS Tutorial</title>
    <script src="angular.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="mycontroller.js" type="text/javascript"></script>
  </head>
  <body>
    <div id='content' ng-app='MyApp' ng-controller='MyController'>
      <h1> {{ article }}!</h1>
    </div>
  </body>
</html>

当您在浏览器中打开 Part1.html 时。

关注点

在本教程部分，我们通过一个示例应用程序对 AngularJS 进行了初步介绍。希望这篇文章能对有兴趣开发 SPA 的初学者有所帮助。

在后续的教程系列中，我们将学习：

  • AngularJS 第二部分：AngularJS 中的数据绑定
  • AngularJS 第三部分：AngularJS 中的事件处理
  • AngularJS 第四部分：验证
  • AngularJS 第五部分：序列化
  • AngularJS 第六部分：模板
  • AngularJS 第七部分：模块
  • AngularJS 第八部分：依赖注入
  • AngularJS 第九部分：自动化测试
  • AngularJS 第十部分：SPA 路由/历史记录
  • AngularJS 第十一部分：指令 - AngularJS 提供的一项功能
  • AngularJS 第十二部分：CSS 集成以创建精美的界面

历史

  • 2014年8月2日：初版
  • 2014年8月18日：第二版
© . All rights reserved.