第一个Angular 2 Application_angular2中添加一个占位符-优快云博客

本文详细介绍如何搭建 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