angular2+Typescript搭建

第一步：安装node.js,npm,cnpm

使用命令查看版本：

//查看npm 
npm -v
//查看node 
node -v
//查看cnpm 
cnpm -v

版本如下：

第二步：创建项目

mkdir myAngularProject
cd myAngularProject

Angular 项目需要以下几个配置文件：

package.json 标记本项目所需的 npm 依赖包。
tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
typings.json为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。

//淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装依赖包
cnpm install

然后在当前目录下就会生成一个 node_modules 目录，包含了所需要的模块。

第三步：创建应用

接下来在myAngularProject目录下面新建app文件夹：

进入app文件夹，创建 app.module.ts 文件，写入：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
@NgModule({
  imports:      [ BrowserModule ]
})
export class AppModule { }

每个 Angular 应用都至少有一个根组件，实例中为 AppComponent，app.component.ts 文件代码如下：

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

接下来我们重新打开 app.module.ts 文件，导入新的 AppComponent ，并把它添加到 NgModule 装饰器的 declarations 和 bootstrap 字段中：

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 如何启动应用。

在 myAngularProject/app 目录下创建 main.ts 文件，代码如下所示：

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

以上代码初始化了平台，让你的代码可以运行，然后在该平台上启动你的 AppModule。

定义该应用的宿主页面

在myAngularProject 目录下创建 index.html 文件

<html>
  <head>
    <title>Angular 2 实例 - 菜鸟教程(runoob.com)</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>

写一个简单的样式style.css放在平级目录下：

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;
}

第五步：编译并运行

将.ts编译成.js,然后启动项目，如果3000端口没被占用的话，默认打开访问 http://localhost:3000/

npm start

最后，放一张目录结构图：