环境准备
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?先不要关心。待我继续学习学习…
欢迎关注,互相交流学习