使用 Angular 2 开发单页应用程序之一
2017-01-18 18:03
513 查看
由于具有实现更高性能的浏览器和智能电话应用程序的潜力,单页应用程序 (SPA) 技术在软件行业引起了广泛的兴趣。在过去 5 年多的时间里,开发人员对 Angular(一个开源 SPA 框架)的兴趣远超他们对其他 Web 框架(React、Backbone、Meteor 和 Ember)的兴趣,这从 StackOverflow 网站上针对每种 Web 框架的问题数量上可以判断出:
Web 和移动开发人员非常喜欢 Angular 2(2016 年 9 月发布)。Angular 2 不是 Angular 1 的一次升级,而是一个全新的、不同的、更高级的框架。精通 Angular 2 已成为构建高性能、可扩展、稳健、现代的跨平台应用程序的一种很吃香的技能。
安装完成后在命令行运行 node -v 确认是否安装正确。输出信息如下,
安装完成后在命令行运行 ng -v 确认是否安装正确。输出可能如下,
来自雅虎的天气组件
货币兑换
电影细节
所有应用程序逻辑都将在您的浏览器中运行。仅在浏览器需要新数据时,才需要服务器。事实上,您可以关闭服务器进程,它仍会在您的应用程序中工作,因为它是一个 SPA。
下图显示了应用程序拓扑结构:
注意不同版本的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 目录可以看到项目结构:
打开您的浏览器并输入 URL http://localhost:4200/。您的 Angular 应用程序会显示 app works!,这表明应用程序已启动、运行并准备就绪:
如果在应用程序运行过程中更改代码,Angular 会非常智能地监视并自动重新启动应用程序。尝试编辑 src/app/app.component.ts 文件,更改 title 的值。如下,
后续文章中将继续基于此开发的一个包含了 3 个微型应用程序的应用程序。
直接获取文章源代码,咨询老师进行答疑问指导,请关注报名我们的实战课程:http://www.dabllo.com/course/207
与更多学员进行技术交流请加 QQ 群,
Web前端技术交流群:610334712
Bootstrap技术讨论组:392639498
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 个微型应用程序的应用程序。
进一步的学习
更多技术提供服务,您可以,直接获取文章源代码,咨询老师进行答疑问指导,请关注报名我们的实战课程:http://www.dabllo.com/course/207
与更多学员进行技术交流请加 QQ 群,
Web前端技术交流群:610334712
Bootstrap技术讨论组:392639498
相关文章推荐
- 快速掌握Node.js环境的安装与运行方法
- Windows系统下Node.js的简单入门教程
- node网页分段渲染详解
- 在Node.js应用中使用Redis的方法简介
- 在Ubuntu系统上安装Ghost博客平台的教程
- Node.js编程中客户端Session的使用详解
- node+express制作爬虫教程
- 使用Raygun对Node.js应用进行错误处理的方法
- 详解nodejs 文本操作模块-fs模块(三)
- 在Mac OS下使用Node.js的简单教程
- Node.js环境下编写爬虫爬取维基百科内容的实例分享
- node.js抓取并分析网页内容有无特殊内容的js文件
- 在Linux系统中搭建Node.js开发环境的简单步骤讲解
- 详解Node.js包的工程目录与NPM包管理器的使用
- 浅析Node在构建超媒体API中的作用
- 在Node.js中使用HTTP上传文件的方法
- Node.js的npm包管理器基础使用教程
- 全面解析node 表单的图片上传
- 举例讲解Node.js中的Writable对象