最近，在学习使用Visual Studio Code来开发Angular 2应用。这是第一次接触Visual Studio Code和Angular 2。Visual Studio Code是一个轻量级的代码编辑器，与旧版的Visual Studio相比，需要自己动手做更多的事情。本文将分享为了搭建开发环境所采取的一系列步骤。
安装Node.js：从Node.js开始，它将作为JavaScript的运行时环境。它还用于使用npm工具（node模块的包管理器）来管理JavaScript包。可以从安装Node.js。更多关于Node.js的信息，可以参考。可能会问：是否必须使用Node.js，或者是否有其他替代方案可以使用，以便运行TypeScript编译器将.ts文件编译成.js文件？这个问题在有答案。
安装TypeScript：在Angular 2中，使用TypeScript语言编写代码。TypeScript代码需要被编译成JavaScript。为此，需要安装TypeScript编译器，它将TypeScript代码转换为JavaScript代码。可以使用以下npm命令在命令提示符中全局安装TypeScript：
npm install -g typescript
这里的-g意味着TypeScript需要全局安装，以便在机器上的任何项目中使用。
安装Visual Studio Code：需要一个源代码编辑器来编写应用程序，将使用Visual Studio Code源代码编辑器。它非常适合编写JavaScript应用程序。可以从安装Visual Studio Code。更多详细信息，请访问。
在系统上选择的位置创建一个名为FirstAngular2Demo的文件夹。打开Visual Studio Code编辑器，点击'文件'>'打开文件夹'按钮。浏览到'FirstAngular2Demo'文件夹。现在VS Code编辑器窗口看起来像这样。
到目前为止，还没有向文件夹中添加任何文件，所以让来做这件事。向这个文件夹中添加一个名为package.json的文件。将以下代码粘贴到package.json文件中：
{
"name": "first-angular2-demo",
"version": "2.0.0",
"description": "Creating first component in Angular 2",
"main": "main.js",
"keywords": [],
"repository": {
"type": "git",
"url": "git://github.com/deeleman/learning-angular2.git"
},
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\"",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4",
"bootstrap": "^3.3.7"
}
}
关于package.json文件的更多信息，请参考。在上述代码中，关键部分包括：
向'FirstAngular2Demo'文件夹中添加一个名为Systemjs.Config.js的文件。将以下代码粘贴到Systemjs.Config.js文件中：
(function (global) {
System.config({
map: {
app: 'app',
'@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
'@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
'@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
'rxjs': 'node_modules/rxjs'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
关于Systemjs.Config.js的更多信息，请查看。
向'FirstAngular2Demo'文件夹中添加一个新的文件tsconfig.json。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2015",
"dom"
]
}
}
tsconfig.json：指定TypeScript编译器所需的设置，以将组件代码转译成当前浏览器可读的纯ECMAScript 5 JavaScript代码。
添加一个新的文件typings.json。在新创建的文件中添加以下代码：
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
typings.Json：它用于检查编译时错误并提供智能感知。
打开命令提示符，到达应用程序文件夹路径（对来说是E:\Angular2\FirstAnguar2Demo），运行以下命令：
npm install
通过运行此命令，将在package.json文件中指定的所有必需依赖项将被安装。打开'FirstAnguar2Demo'文件夹，将能够看到'node_modules'文件夹被创建。打开这个文件夹，将看到所有依赖项都已添加。
在VS code中点击刷新选项，现在node_modules文件夹也将在VS code中可见。
在根文件夹中添加一个名为app的新文件夹。向其中添加一个名为main.ts的文件。
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@Component({
selector: 'hello-angular',
template: ''
})
export class DemoAngularComponent {
greeting: string;
constructor() {
this.greeting = 'Welcome toAngular 2App !!';
}
}
// Main module, bootstrapping HelloAngularComponent as root component
@NgModule({
imports: [BrowserModule],
declarations: [DemoAngularComponent],
bootstrap: [DemoAngularComponent],
})
export class AppModule { }
// Application bootstrap (specific for browser environments)
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
当运行此命令时，main.ts文件将由TypeScript编译器编译，并在同一位置创建main.js文件。
现在需要一个可以在浏览器中查看的.html文件，所以让在根文件夹级别（E:\Angular2\FirstAnguar2Demo）添加一个Index.html文件。将以下代码粘贴到Index.html文件中：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Learning Angular 2</title>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(console.error.bind(null));
</script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<hello-angular></hello-angular>
</body>
</html>
将使用lite-server快速运行应用程序。它提供静态内容，检测更改，刷新浏览器，并提供许多自定义选项。让安装并使用lite-server运行应用程序：
# To install globally:
npm install -g lite-server
# To run (you must be in the application folder as shown in below screenshots):
lite-server