使用VS Code开发AngularJS 2 第一个应用程序

目录

• 运行环境

• 创建项目

• 安装依赖包

• 创建TypeScript应用程序

• 配置应用程序

• 运行应用程序

运行环境

运行环境：

• Windows 10

• Node 6.7.0
  

• npm 3.10.8
  

• TypeScript 2.0.3

创建项目

• 1、创建文件夹：angular2-quickstart，启动VS Code，打开刚创建的文件夹：angular2-quickstart。
• 2、在根文件夹（angular2-quickstart）下，创建package.json文件：

{"name": "angular-quickstart","version": "1.0.0","scripts": {"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ","lite": "lite-server","postinstall": "typings install","tsc": "tsc","tsc:w": "tsc -w","typings": "typings"},"license": "ISC","dependencies": {"@angular/common": "~2.0.2","@angular/compiler": "~2.0.2","@angular/core": "~2.0.2","@angular/forms": "~2.0.2","@angular/http": "~2.0.2","@angular/platform-browser": "~2.0.2","@angular/platform-browser-dynamic": "~2.0.2","@angular/router": "~3.0.2","@angular/upgrade": "~2.0.2","angular-in-memory-web-api": "~0.1.5","bootstrap": "^3.3.7","core-js": "^2.4.1","reflect-metadata": "^0.1.8","rxjs": "5.0.0-beta.12","systemjs": "0.19.39","zone.js": "^0.6.25"},"devDependencies": {"concurrently": "^3.1.0","lite-server": "^2.2.2","typescript": "^2.0.3","typings": "^1.4.0"}
}

• 3、在根文件夹（angular2-quickstart）下，创建tsconfig.json文件：

{"compilerOptions": {"target": "es5","module": "commonjs","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false}
}

• 4、在根文件夹（angular2-quickstart）下，创建typings.json文件：

{"globalDependencies": {"core-js": "registry:dt/core-js#0.0.0+20160725163759","jasmine": "registry:dt/jasmine#2.2.0+20160621224255","node": "registry:dt/node#6.0.0+20160909174046"}
}

• 5、在根文件夹（angular2-quickstart）下，创建systemjs.config.js(JavaScript脚本)文件：

/*** System configuration for Angular samples* Adjust as necessary for your application needs.*/
(function(global) {System.config({paths: {// paths serve as alias'npm:': 'node_modules/'},// map tells the System loader where to look for thingsmap: {// our app is within the app folderapp: 'app',// angular bundles'@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',// other libraries'rxjs': 'npm:rxjs','angular-in-memory-web-api': 'npm:angular-in-memory-web-api',},// packages tells the System loader how to load when no filename and/or no extensionpackages: {app: {main: './main.js',defaultExtension: 'js'},rxjs: {defaultExtension: 'js'},'angular-in-memory-web-api': {main: './index.js',defaultExtension: 'js'}}});
})(this);

文件结构：

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules ...
|_ typings ...
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json

安装依赖包（最关键一步）

• 使用 npm 命令来安装 package.json 中列出的依赖包。在命令行 cmd 窗口，输入：cd angular2-quickstart，进入angular2-quickstar文件夹下，输入下列命令：

npm install

创建TypeScript应用程序

• 1、在VS Code中，在根文件夹（angular2-quickstart）下，创建app子文件夹。
• 2、在子app文件夹下，创建TypeScript文件app.module.ts：

import { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent }   from './app.component';@NgModule({imports:      [ BrowserModule ],declarations: [ AppComponent ],bootstrap:    [ AppComponent ]
})export class AppModule { }

• 3、在子app文件夹下，创建TypeScript文件app.component.ts：

import { Component } from '@angular/core';@Component({selector: 'my-app',template: '<h1>我的第一个 AngularJS 2 应用程序</h1>'
})export class AppComponent { }

• 4、在子app文件夹下，创建TypeScript文件main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);

• 5、在根文件夹（angular2-quickstart）下，创建html文件index.html：

<html><head><title>Angular QuickStart</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="styles.css"><!-- 1. Load libraries --><!-- Polyfill(s) for older browsers --><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><!-- 2. Configure SystemJS --><script src="systemjs.config.js"></script><script>System.import('app').catch(function(err) {console.error(err);});</script>
</head>
<!-- 3. Display the application --><body><my-app>Loading...</my-app>
</body></html>

• 6、在根文件夹（angular2-quickstart）下，创建css文件styles.css：

/* Master Styles */h1 {color: #369;font-family: Arial, Helvetica, sans-serif;font-size: 250%;
}h2,
h3 {color: #444;font-family: Arial, Helvetica, sans-serif;font-weight: lighter;
}body {margin: 2em;
}

配置应用程序

• 1、在VS Code中，在根文件夹（angular2-quickstart）下，创建.vscode子文件夹。
• 2、在.vscode子文件夹下，创建settings.json文件：

// 将设置放入此文件中以覆盖默认值和用户设置。
{"typescript.tsdk": "node_modules/typescript/lib",// ts 项目, 隐藏 .js 和 .js.map 文件"files.exclude": {"node_modules": true,"**/*.js": { "when": "$(basename).ts" },"**/*.js.map": true}}

• 3、在.vscode子文件夹下，创建tasks.json文件：

{// See https://go.microsoft.com/fwlink/?LinkId=733558// for the documentation about the tasks.json format"version": "0.1.0","command": "cmd","isShellCommand": true,"showOutput": "always","args": ["/C npm start"]
}

运行应用程序

• 至此，配置完毕，按 Ctrl + Shift + B 编译，程序将会将Typescript编译成 Javascript ，同时启动一个 lite-server， 加载我们编写的index.html。 显示：我的第一个 Angular 2 应用程序

参考资料

• 快速起步
• 打造AngularJs2.0开发环境
• AngularJs 2 快速入门
• AngularJS2.0起步