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

ng-tutorial 第一部分：AngularJS - 起源

debashishPaul
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.82/5 (17投票s)

2014年12月18日

CPOL

10分钟阅读

viewsIcon

49958

downloadIcon

162

通过开发一个真实项目学习 AngularJS。

引言

最近，我开始学习 AngularJS，因为我的新项目需要它。开始这个系列的原因是分享我的学习心得，希望能对其他学习者有所帮助。

认识 Angular

AngularJS 是一个超级强大、开源的客户端 JavaScript Web 应用程序框架，旨在提供高效率的 Web 开发体验，由 Google 和社区提供强大支持。开发团队将其描述为“动态 Web 应用程序的结构化框架”，AngularJS 之所以被称为超级强大，是因为它让开发人员无需考虑其他事情，只需专注于应用程序的核心业务和逻辑。

Angular 于 2009 年由 Miško Hevery 和 Adam Abrons 在 Brat Tech LLC 开发，最初是一个将云端 JSON 存储与使用 HTML 和 JavaScript 编写的应用程序连接起来的框架。Aborns 从 HTML 标签的尖括号中获得灵感，将该框架命名为 Angular。后来，Angular Duo 将 Angular 发布为一个开源库。Abrons 离开项目后，Hevery 继续与其他 Google 员工一起开发该库。

“在构建 UI 和连接软件组件方面，声明式代码优于命令式代码，而命令式代码在表达业务逻辑方面表现出色”——Angular 正是基于这种信念而开发的，它通过扩展现有的词汇来增强传统 HTML，从而通过一种称为双向数据绑定的技术来提供动态内容，该技术允许模型和视图之间的自动同步。AngularJS 完全专注于提高可测试性和性能，并淡化了之前流行的使用 JavaScript 进行 DOM 操作的做法。

MVW：架构概念

AngularJS 构建在 Model-View-Controller 模式的概念之上。MVC 模式的引入是为了分离软件应用程序的关注点。关注点是指应用程序中具有相似角色或目的的逻辑单元。顾名思义，MVC 将应用程序分为三个部分：模型 (Model)、视图 (View) 和控制器 (Controller)。

  • 模型 (Model) 包含关于业务领域知识。
  • 视图 (View) 是用户与之交互的 UI。
  • 控制器 (Controller) 将模型和视图连接在一起。它们构成了应用程序的业务逻辑和表示层。基本上，控制器负责控制应用程序的流程。

如今，这些概念有些抽象。根据应用程序的语言、平台和目的，它们有多种实现方式。由于控制器基本上负责决定在视图中显示模型的哪些部分，因此根据实现方式，它也可以被视为视图模型 (viewmodel) 或表示器 (presenter)。虽然概念上，典型的 AngularJS 应用程序包含视图、模型和控制器，但其他重要组件，如服务 (services)、指令 (directives) 和过滤器 (filters) 也支持它，从而可以方便地设计具有模型、视图、控制器、视图模型或任何最适合的组合的应用程序。因此，其作者决定称 AngularJS 为 Model-View-Whatever (MVW)。

设计理念

Angular 与众不同的地方在于其设计理念。我们需要深入了解它们，才能对它提供的功能有 proper 的理解。

数据驱动

Angular 的核心功能之一是其数据绑定。在 Angular 应用程序中，无需将模型中的数据组合起来并与 HTML 模板放在一起向用户提供视图。我们只需要将数据绑定到 HTML 中，Angular 就会负责从模型中获取值并在视图中显示。

声明式

Angular 采用声明式方法，通过创建名为指令 (directives) 的可重用组件的能力来扩展 HTML 的词汇。指令基本上是自定义 HTML 标签或属性，Angular 在将它们渲染到浏览器时会解析它们。

关注点分离

由于 AngularJS 是围绕 MVC 模式发展的，它将应用程序划分为三个具有指定职责的部分。

依赖注入

Angular 是少数拥有功能齐全的内置依赖注入 (Dependency Injection) 系统的 JavaScript 框架之一。依赖注入是一种概念，它将某个模块或类的依赖项从其调用者作为参数或其他形式提供，而不是在内部实例化它们。

可扩展性

AngularJS 能够用无限的新功能扩展 HTML。除了内置指令外，它还提供了一个 API，允许开发人员以任何想象到的方式创建声明式、可重用的组件。

可测试性

AngularJS 的设计宗旨是可测试性，从控制器、服务和指令的底层到视图和路由的顶层。这一特性使得 Angular 应用程序随时间推移更具可扩展性和可管理性，并有助于保持对应用程序的信心。

为什么选择 Angular？

现在，提炼一下，为什么我们应该选择 Angular 而不是其他框架，它有什么好处。

  • 作为超级强大的框架，Angular 负责一切，而开发人员可以完全专注于应用程序核心。
  • AngularJS 允许开发人员用比其他 JavaScript 解决方案更少的代码构建应用程序。事实上，Miško 与他的经理打赌，使用 AngularJS 将一个包含 17,000 行代码的项目缩减到只有 1,500 行。
  • 由于其声明式设计理念，AngularJS 应用程序更容易理解。
  • 与任何其他 MVC 应用程序一样，AngularJS 应用程序的 UI 布局和设计可以独立于其业务逻辑和功能进行更改。这还使得应用程序更具模块化、灵活性和可测试性。
  • AngularJS 应用程序模板是用纯 HTML 编写的，这为 Web 设计人员和 JavaScript 开发人员并行工作提供了绝佳的机会。
  • AngularJS 应用程序的单元测试很容易。
  • AngularJS 允许我们有机会集成其他 JavaScript 库。

开始使用 Angular

边做边学总是最好的。所以，我将从一个小项目开始，一边学习一边讨论。这不会是一个企业级应用程序。相反，我将尝试用测试驱动的方式涵盖基础知识，也许会比基础知识多一些，以及标准实践（没有实践是最好的实践）。

我们将开发一个商店应用程序。我们将随着项目的进行逐步构建需求。如果这听起来不太有计划，那么项目的目的是学习 AngularJS，而不是交付项目。因此，我们的项目需求将围绕我们学习 Angular 的需求而演变。

首先，第一件事：设置

获取 Angular

很明显，我们需要 AngularJS 库才能开始。如果您还没有，请从其官方网站 https://angularjs.org 下载。点击“下载”按钮。我想要稳定版本并选择“zip”选项。这会给我带来大量的库，我可能需要也可能不需要。但我有足够的磁盘空间来存储它们。

Twitter Bootstrap(?)

这完全是题外话。Angular 与它没有任何关系。但我喜欢以后能用它来美化页面。

IDE

检查您喜欢的 IDE 是否还在。如果您没有，我推荐 Sublime Text。它是一个轻量级的文本编辑器，具有项目功能。此外，Angular 包可以从 https://github.com/angular-ui/AngularJS-sublime-package 安装。

Web 服务器

为了服务文件，我们需要一个服务器。我使用了 Node.JS 的 http-server。它非常轻量级。设置服务器

  1. 前往 Node.JS 网站的下载页面（https://node.org.cn/download/），并根据您的操作系统进行下载。
  2. 安装 Node.JS
  3. 从您的开始菜单打开 Node.JS 命令提示符，然后输入
    npm install http-server -g

测试运行器

由于这是一个测试驱动的方法，我们需要运行测试。要运行测试，我们需要一个 测试运行器。要获取“绝佳的 JavaScript 测试运行器”，只需在同一个 Node.JS 命令提示符中输入以下命令

npm install karma -g
npm install karma-ng-scenario -g

是的，Karma（https://karma.node.org.cn/）也是一个 Node.JS 模块，是的，它可能是最适合 Angular 的测试运行工具。

项目环境

如果您已经完成了以上步骤，那么您已经安装了开始项目所需的一切。现在是时候设置项目环境了。

因此，在“NGProducts”文件夹内创建两个名为“app”和“test”的文件夹。

  1. 让我们创建一个工作区文件夹。我将我的项目命名为“NGProducts”，所以我也将文件夹命名为相同。

  2. 所有测试驱动的项目都有两个部分
    1. 主应用程序
    2. 测试

  3. 在“app”文件夹中，创建一个名为“index.html”的文件。将以下 HTML 放入文件中

    <!DOCTYPE html>
<html>
    <head>
        <title>NGProducts</title>
    </head>
    <body>
        <h1>Hello World!!!</h1>
    </body>
</html>

  4. 现在我们需要启动 Web 服务器来检查我们出色的工作。为此，输入

    http-server [path/to/app]

    默认情况下，它在 localhost:8080 上启动服务器。要访问高级选项，请随时查看 https://npmjs.net.cn/package/http-server。

  5. 打开浏览器，转到 localhost:8080。

如果您看到的和我一样，那么恭喜您！您已成功配置了 http-server。现在我们可以向 Angular 说“你好”了。

HelloWorld

你好 Angular！！！

要开始开发 Angular 应用程序，我们需要做的第一件事是将 Angular 库包含到项目中。为此

  1. 在“app”文件夹中，创建“lib”文件夹，然后在“lib”文件夹中创建“angular”文件夹。我们将在需要时添加更多库。
  2. 解压缩我们已经下载的 AngularJS 包。将“angular.min.js”文件复制到“NGProducts/app/lib/angular”文件夹。
  3. 在 <body> 标签结束之前添加以下行
    <script src="lib/angular/angular.min.js"></script>
  4. 我们即将创建我们的第一个 Angular 应用。在编辑器中打开“index.html”文件并将其更改为
    <!DOCTYPE html>
<html ng-app>
    <head>
        <title>NG Store</title>
    </head>
    <body>
        <h1>Hello {{'A' + 'ng' + 'ular' + '!!!'}}</h1>
        <script src="lib/angular/angular.min.js"></script>
    </body>
</html>

保存并刷新浏览器。如果您看到的和我一样，那么您已经成功地向 Angular 打招呼了。

Hello Angular

这是什么“你好”？

如果我们回顾我们的代码，到目前为止它都是纯 HTML，除了“ng-app”和大括号 (“{”) 等一些不熟悉符号和表示法。

Angular 用一种称为“指令 (Directives)”的东西教授 HTML 新技巧。Angular 库中加载了许多预定义指令，但这并不是全部。我们可以创建自己的指令，这仅凭 HTML 和 Angular 就能带来无限的可能性。我们将在稍后深入讨论指令。但作为开始，指令是一些（可以是属性、元素、类或注释的形式）东西，当 Angular 在 DOM 中找到它们时，它就知道需要对这些指令做些什么。

ng-app 是一个指令，它告诉 Angular 需要管理 DOM 的哪个部分。在我们的例子中，我们在 <html> 标签中声明了它，这意味着我们希望 Angular 管理整个页面。它也可以声明在页面的较小部分，例如在 <div> 标签中。这对于我们想在已用其他技术开发的现有系统实现 Angular，但又希望用 Angular 开发新功能时非常有用。

Angular 从 mustache.js（https://mustache.github.io/）采纳了双大括号 (“{{”) 的表示法。它指示 Angular 解析'{{' 和 '}}' 之间的内容。

现在让我们看看我们的应用程序中到底发生了什么。在 DOM 加载之前，Angular 不会启动。当它在 DOM 中找到 ng-app 时，它就知道需要管理 DOM 的哪个部分，并开始查找它需要执行的操作。一旦它找到 '{{'，它就开始解释双大括号内的代码，并使用解析后的值更新 DOM 中的该部分。

结论

暂时就到这里。希望这能为您开始使用 Angular 提供一个很好的基础。我很快就会带着教程的下一部分回来。在此之前，再见。

© . All rights reserved.