angular2之前端篇—1（node服务器分支）

时间：2016-10-23 14:55:41 阅读：337 评论：0 收藏：0 [点我收藏+]

标签：dem commons 准备令行 git hid splay with depend

　　上一篇 .net core和angular2之前端篇—1 使用的是dotnet模板。之所以用它，因为想用他写webapi，但是写道下一篇的时候遇到点问题，所以先写个分支测试一下。这次是用Node作为服务器——webpack-dev-server。感觉这个demo 好简单啊！

　　一、新建一个项目目录，这里为F:\Visual Studio Code\app1

　　二、在项目根目录下添加JSON配置文件：package.json、tsconfig.json、typings.json

{
  "name": "webapplication",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "postinstall": "typings install",
    "build": "webpack",
    "start": "webpack-dev-server"
   },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "^2.1.1",
    "@angular/http": "^2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",

    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "typescript": "^2.0.3",
    "typings": "^1.3.2",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }
}

package.json

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

tsconfig.json

{
  "globalDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

typings.json

　　三、添加webpack配置文件webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: {
    "vendor": "./typescript/vendor.ts",
    "app": "./typescript/main.ts"
  },
  output: {
    path: __dirname,
    filename: "./js/[name].bundle.js"
  },
  resolve: {
    extensions: [‘‘, ‘.ts‘, ‘.js‘]
  },
  devtool: ‘source-map‘,
  module: {
    loaders: [
      {
        test: /\.ts/,
        loaders: [‘awesome-typescript-loader‘, ‘angular2-template-loader‘],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: [‘app‘, ‘vendor‘]
    })
  ]
}

webpack.config.js

　　四、添加主页面index.html

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <my-app>Loading...</my-app>1111111111111111111111
  <script type="text/javascript" src="js/vendor.bundle.js"></script>
  <script type="text/javascript" src="js/app.bundle.js"></script></body>
</html>

index.html

　　五、在根目录下新建目录“typescript”（用户存放ts文件），并依次新建app.component.ts、app.module.ts、main.ts和vendor.ts四个个文件

import {Component} from ‘@angular/core‘;

@Component({
    selector: ‘my-app‘,
    template: ‘<h1>My First Angular App</h1>‘
})

export class AppComponent {}

app.component.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 {}

app.module.ts

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic‘;
import {AppModule} from ‘./app.module‘

platformBrowserDynamic().bootstrapModule(AppModule);

main.ts

// Angular
import ‘@angular/platform-browser‘;
import ‘@angular/platform-browser-dynamic‘;
import ‘@angular/core‘;
import ‘@angular/common‘;

// RxJS
import ‘reflect-metadata‘;
import ‘rxjs‘;
import ‘zone.js/dist/zone‘;

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...