Angular 2 环境搭建

1、下载安装 nodejs 和 npm

2、新建文件夹 ‘angular2-quickstart-master’

3、在‘angular2-quickstart-master’ 添加文件目录结构如下：

index.html:

<html>

<head>
  <title>Angular 2 QuickStart</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

  <!-- 1. Load libraries -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.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.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.min.js"></script>

  <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      packages: {
        app: {
          format: 'register',defaultExtension: 'js'
        }
      },map: {
        moment: 'node_modules/moment/moment.js',"@angular/core": "node_modules/@angular/core/core.umd.js","@angular/common": "node_modules/@angular/common/common.umd.js","@angular/compiler": "node_modules/@angular/compiler/compiler.umd.js","@angular/platform-browser": "node_modules/@angular/platform-browser/platform-browser.umd.js","@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js",// ng2-bootstrap specifics
        "@angular/core/src/facade/lang": "node_modules/@angular/core/src/facade/lang.js",//        "@angular/platform-browser/src/animate/animation_builder": "node_modules/@angular/platform-browser/src/animate/animation_builder.js"
      }
    });
    System.import('app/boot')
      .then(null,console.error.bind(console));
  </script>

</head>

<!-- 3. Display the application -->
<body>
<my-app></my-app>
</body>

</html>

package.json:

{
  "name": "angular2-quickstart","version": "1.0.0","scripts": {
    "postinstall": " ./node_modules/.bin/typings install","tsc": "tsc","tsc:w": "tsc -w","lite": "lite-server","start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },"license": "ISC","dependencies": {
    "@angular/common": "^2.0.0-rc.1","@angular/compiler": "^2.0.0-rc.1","@angular/core": "^2.0.0-rc.1","@angular/platform-browser": "^2.0.0-rc.1","@angular/platform-browser-dynamic": "^2.0.0-rc.1","bootstrap": "^3.3.6","es6-shim": "0.35.0","ng-semantic": "^1.0.21","ng2-bootstrap": "1.0.16","reflect-Metadata": "0.1.2","rxjs": "5.0.0-beta.6","systemjs": "0.19.28","typings": "0.8.1","zone.js": "0.6.12"
  },"devDependencies": {
    "concurrently": "2.0.0","lite-server": "2.2.0","typescript": "1.8.10"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false,"listFiles": true
  },"exclude": [
    "node_modules","typings/browser.d.ts"
  ]
}

typings.json:

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

4、打开终端运行： npm install，可能需要等待一段时间下载，下载完成后项目目录下会多出’node_modules‘的文件夹。

5、再在项目根目录下新建app文件夹，添加文件 app.component.ts:

import {Component} from '@angular/core';
import {AlertComponent,DATEPICKER_DIRECTIVES,CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',directives: [AlertComponent,DATEPICKER_DIRECTIVES],template: `
    <alert type="info">ng2-bootstrap hello world!</alert>
      <pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
      <h4>Inline</h4>
      <div style="display:inline-block; min-height:290px;">
        <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
      </div>
  `
})
export class AppComponent {
  public dt:Date = new Date();
  private minDate:Date = null;
  private events:Array<any>;
  private tomorrow:Date;
  private afterTomorrow:Date;
  private formats:Array<string> = ['DD-MM-YYYY','YYYY/MM/DD','DD.MM.YYYY','shortDate'];
  private format = this.formats[0];
  private dateOptions:any = {
    formatYear: 'YY',startingDay: 1
  };
  private opened:boolean = false;

  public getDate():number {
    return this.dt && this.dt.getTime() || new Date().getTime();
  }
}

和 boot.ts:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component'
import {enableProdMode} from '@angular/core';

enableProdMode();

bootstrap(AppComponent);

再打开终端，cd到你项目根目录下运行，npm start 这样你的项目就跑起来了

Angular 2 环境搭建

相关文章