使用 Angular 2 开发单页应用程序之一

由于具有实现更高性能的浏览器和智能电话应用程序的潜力，单页应用程序 (SPA) 技术在软件行业引起了广泛的兴趣。在过去 5 年多的时间里，开发人员对 Angular（一个开源 SPA 框架）的兴趣远超他们对其他 Web 框架（React、Backbone、Meteor 和 Ember）的兴趣，这从 StackOverflow 网站上针对每种 Web 框架的问题数量上可以判断出：

tag-trends

Web 和移动开发人员非常喜欢 Angular 2（2016 年 9 月发布）。Angular 2 不是 Angular 1 的一次升级，而是一个全新的、不同的、更高级的框架。精通 Angular 2 已成为构建高性能、可扩展、稳健、现代的跨平台应用程序的一种很吃香的技能。

准备工作

安装 Node.js

1. 从 Node.js 下载稳定版本，选择默认选项来完成安装。
2. 安装完成后在命令行运行 node -v 确认是否安装正确。输出信息如下，

v6.9.4

安装 Angular CLI

1. 运行 npm install -g angular-cli 来安装angular cli。
2. 安装完成后在命令行运行 ng -v 确认是否安装正确。输出可能如下，

angular-cli: 1.0.0-beta.25.5
node: 6.9.4
os: darwin x64

示例项目概述

项目包含一个开箱即用的 Angular 应用程序，以及基于此开发的一个自定义应用程序。当完成项目时，您将拥有一个包含 3 个微型应用程序的 Angular 应用程序，这些应用程序使用了 3 个 Web 服务 API：
来自雅虎的天气组件
货币兑换
电影细节

所有应用程序逻辑都将在您的浏览器中运行。仅在浏览器需要新数据时，才需要服务器。事实上，您可以关闭服务器进程，它仍会在您的应用程序中工作，因为它是一个 SPA。

下图显示了应用程序拓扑结构：

应用程序拓扑结构

创建基础应用程序和模块

创建一个 Angular 项目

1. 运行下面的命令来生成一个新 Angular 项目（其中 dw-ng2-app 是项目名称）：

ng new dw-ng2-app --skip-git

注意不同版本的angular-cli对项目名称有不同的限制，比如
1.0.0-beta.21 允许使用 dw_ng2_app 的名称
1.0.0-beta.25 不再允许 dw_ng2_app 名称，需要用 dw-ng2-app

2. 安装所有需要的包和 Angular 基础应用程序（这将花费大约 10 分钟时间）后，在 /dw-ng2-app 目录可以看到项目结构：

|— e2e
|— node_modules
|— src
angular-cli.json
karma.conf.js
package.json
protractor.conf.js
README.md
tslint.json

运行开箱即用的 Angular 应用程序

1. 在项目目录，运行 ng serve 来启动应用。默认情况下，该进程在端口 4200 上启动。

2. 打开您的浏览器并输入 URL http://localhost:4200/ 。您的 Angular 应用程序会显示 app works!，这表明应用程序已启动、运行并准备就绪：
   

   

   启动应用程序

3. 在应用程序运行过程中更改代码，Angular 会非常智能地监视并自动重新启动应用程序。尝试编辑 src/app/app.component.ts 文件，更改 title 的值。如下，

   
   
   

   修改应用程序

后续文章中将继续基于此开发的一个包含了 3 个微型应用程序的应用程序。

文章导航

1. 使用 Angular 2 开发单页应用程序之一
2. 使用 Angular 2 开发单页应用程序之二
3. 使用 Angular 2 开发单页应用程序之三

进一步的学习

免费获取项目源代码，咨询老师进行答疑指导，请加QQ：1628145742 ，或报名我们的实战课程：

• http://www.yikeshangshou.com/course/207
• http://www.yikeshangshou.com/course/211