由于具有实现更高性能的浏览器和智能电话应用程序的潜力，单页应用程序 (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
- 从 Node.js 下载稳定版本，选择默认选项来完成安装。
- 安装完成后在命令行运行 node -v 确认是否安装正确。输出信息如下，
v6.9.4
安装 Angular CLI
- 运行 npm install -g angular-cli 来安装angular cli。
- 安装完成后在命令行运行 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 项目
- 运行下面的命令来生成一个新 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
- 安装所有需要的包和 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 应用程序
-
在项目目录，运行 ng serve 来启动应用。默认情况下，该进程在端口 4200 上启动。
-
打开您的浏览器并输入 URL http://localhost:4200/ 。您的 Angular 应用程序会显示 app works!，这表明应用程序已启动、运行并准备就绪：
启动应用程序
-
在应用程序运行过程中更改代码，Angular 会非常智能地监视并自动重新启动应用程序。尝试编辑 src/app/app.component.ts 文件，更改 title 的值。如下，
修改应用程序
后续文章中将继续基于此开发的一个包含了 3 个微型应用程序的应用程序。
文章导航
进一步的学习
免费获取项目源代码，咨询老师进行答疑指导，请加QQ：1628145742 ，或报名我们的实战课程：
网友评论