第一个Angular 2 Application

本文详细介绍如何搭建 Angular2 的开发环境,包括安装 Node.js、TypeScript 和 angular-cli 工具,以及创建并启动首个 Angular2 应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

环境准备

Angular 2 是基于TypeScript开发的,Angular 2 开发环境的准备有下面几步:
1. 安装Node.js
2. 安装TypeScript
3. 安装angular-cli

1. 安装Node.js

安装Node.js分享的文章已经很多了,自行搜索。Node.js

2. 安装TypeScript

安装TypeScript时一定要确保Node.js安装成功。安装的TypeScript版本一定不要低于1.7。下面是安装最新版本TypeScript的命令。

$ npm install -g typescript

如果安装指定版本的TypeScript,使用下面的命令。将version替换为你想安装的版本号。

$ npm insatll -g typescript@version

*注:npm是随Node.js一起安装的。如果提示npm命令不存在,请确认Node.js安装正确安装。
Windows用户:上面的命令适用于Linux/macOS操作系统。如果想在Windows系统使用上面的命令可以安装Cygwin*

3. 安装angular-cli

Angular 2 提供了angular-cli(command line interface)工具。可以使用ng命令创建、编译、构建、测试应用,并且可以启动服务等。下面是安装angular-cli的命令。

$ npm install -g angular-cli

安装成功之后可以使用下面的命令验证是否安装成功。

$ ng version

结果会列出angular-cli的版本和Node.js的版本。

创建Angular 2 Application

经过上面的步骤环境已经准备好,使用下面的命令来创建应用。

$ ng new helloworld

输出结果如下图所示:

installing ng2
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.json
  create angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'helloworld' successfully created.

注:在Installing packages for tooling via npm会等待一段时间,不用着急等着就行。

可以进入目录看看都创建了什么,如下所示:

├── README.md
├── angular-cli.json
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── src
└── tslint.json

现在我们看看src下面是什么,如下所示:

.
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
└── tsconfig.json

3 directories, 14 files

使用编辑器打开index.html,内容如下所示:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Helloworld </title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

熟悉HTML的很容易理解index.html里的内容。是应用要渲染的。Loading是一个占位符,当应用还没有加载完成时显示。

启动应用

我们不需要对应用做任何改动就可以启动起来。angular-cli有一个命令可以启动HTTP server服务,在应用的根目录,也就是上面创建的应用helloworld应用目录下,执行下面命令:

ng server

会看到下面的输出结果

** NG Live Development Server is running on http://localhost:4200. **

从输出结果很容易知道要访问http://localhost:4200,访问之后,页面内容如下:

app works!

至此第一个应用已经启动起来,至于为什么结果是app works?先不要关心。待我继续学习学习…

欢迎关注,互相交流学习

SitHomeBing

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值