减小字体
增大字体- ·上一篇文章：Angular 2 JavaScript 环境配置
- ·下一篇文章：Angular 2 架构
Angular 2 TypeScript 环境配置
文件，导入新的 AppComponent ，并把它添加到 NgModule 装饰器的 declarations 和 bootstrap 字段中：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 { }第四部：启动应用接下来我们需要告诉 Angular 如何启动应用。在 angular-quickstart/app 目录下创建 main.ts 文件，代码如下所示：main.ts 文件：import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);以上代码初始化了平台，让你的代码可以运行，然后在该平台上启动你的 AppModule。定义该应用的宿主页面在 angular-quickstart 目录下创建 index.html 文件，代码如下所示：index.html 文件：<html><head><title>Angular 2 实例 - k88.net(k88.net)</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="styles.css"><!-- 1. 载入库 --><!-- IE 需要 polyfill --><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. 配置 SystemJS --><script src="systemjs.config.js"></script><script>System.import('app').catch(function(err){ console.error(err); });</script></head><!-- 3. 显示应用 --><body><my-app>Loading...</my-app></body></html>这里值得注意的地方有：JavaScript 库： core-js 是为老式浏览器提供的填充库， zone.js 和 reflect-metadata 库是 Angular 需要的，而 SystemJS 库是用来做模块加载的。SystemJS 的配置文件和脚本，可以导入并运行了我们刚刚在 main 文件中写的 app 模块。<my-app> 标签是应用载入的地方添加一些样式我们可以在 angular-quickstart 目录的 styles.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;}第六步：编译并运行应用程序打开终端窗口，输入以下命令：npm start访问 http:
//localhost:
3000/，浏览器显示结果为：这样我们的第一个 Angular2 的应用就算创建完成了，最终的目录结构为：本文所使用的源码可以通过以下方式下载，不包含 node_modules 和 typings 目录。源代码下载
[ BrowserModule ],declarations:
[ AppComponent ],bootstrap:
[ AppComponent ]})export class AppModule { }第四部：启动应用接下来我们需要告诉 Angular 如何启动应用。在 angular-quickstart/app 目录下创建 main.ts 文件，代码如下所示：main.ts 文件：import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);以上代码初始化了平台，让你的代码可以运行，然后在该平台上启动你的 AppModule。定义该应用的宿主页面在 angular-quickstart 目录下创建 index.html 文件，代码如下所示：index.html 文件：<html><head><title>Angular 2 实例 - k88.net(k88.net)</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="styles.css"><!-- 1. 载入库 --><!-- IE 需要 polyfill --><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. 配置 SystemJS --><script src="systemjs.config.js"></script><script>System.import('app').catch(function(err){ console.error(err); });</script></head><!-- 3. 显示应用 --><body><my-app>Loading...</my-app></body></html>这里值得注意的地方有：JavaScript 库： core-js 是为老式浏览器提供的填充库， zone.js 和 reflect-metadata 库是 Angular 需要的，而 SystemJS 库是用来做模块加载的。SystemJS 的配置文件和脚本，可以导入并运行了我们刚刚在 main 文件中写的 app 模块。<my-app> 标签是应用载入的地方添加一些样式我们可以在 angular-quickstart 目录的 styles.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;}第六步：编译并运行应用程序打开终端窗口，输入以下命令：npm start访问 http:
//localhost:
3000/，浏览器显示结果为：这样我们的第一个 Angular2 的应用就算创建完成了，最终的目录结构为：本文所使用的源码可以通过以下方式下载，不包含 node_modules 和 typings 目录。源代码下载
Angular 2 TypeScript 环境配置
