上一篇.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, ...

vendor.ts

　　准备工作已经搞定，然后只需在命令行键入两次命令（npm install、npm start）就搞定了，截图如下：

　　如上图所示，监听端口是8080，在浏览器输入http://localhost:8080/ ，如下图：

　　这是做的最简单的一个 angular2 Demo例子。

angular2之前端篇—1（node服务器分支）的更多相关文章

  1. .net core和angular2之前端篇—1

    2016-10-20更新 今天的这篇文章还是一篇"Hello World",只不过开发环境有所改变--Visual Studio Code+Angular2+Webapck,也算是 ...

  2. 创建 Web 前端开发环境(node和npm以及git)

    Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...

  3. 创建 Web 前端开发环境(node和npm)

    Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...

  4. 手把手教你从购买vps到搭建一个node服务器

    要准备什么? 1.5刀 2.最好有FQ软件(可以用蓝灯) let's Go! 一.vps购买 vps可以选择digital ocean(do) 链接 ,由于是外国网站,响应比较慢,所以最好翻个墙. g ...

  5. koa-static node服务器设置静态目录

    最近毕设需要用到上传照片,但当node服务器成功获取前端传来的图片时,又不知道如何在页面获取服务器image目录下的图片,一直报以下错误: 问题主要是无法找到图片url,虽然可以一个个在app.js文 ...

  6. 上传图片，通过node服务器存储在指定目录

    最近做毕设,需要上传图片,因为在本地服务器运行,所以想着前端上传后,通过node服务器接收图片,存储在指定的目录下. 一.前端实现 1.前端的页面和上传图片是利用element-ui组件实现的,&qu ...

  7. 亚马逊EC2服务器申请+NODE服务器部署+阿里云域名申请+SSL证书使用

    最近,由于项目需要,自己申请了一台亚马逊用于部署网站测试,在使用期间,发现网上没有一篇非常完整的文章讲解从服务器申请到域名解析,SSL证书申请的整个流程.所以自己总结一下,以供大家学习! 一.亚马逊E ...

  8. 使用express创建node服务器的两种方法及区别

    使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen ...

  9. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

随机推荐

  1. 【HanLP】资料链接汇总

    Java中调用HanLP配置 HanLP自然语言处理包开源官方文档 了解HanLP的全部 自然语言处理HanLP 开源自由的汉语言处理包主页 GitHub源码 基于hanLP的中文分词详解-MapRe ...

  2. 用angular怎么缓存父页面数据

    angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父 ...

  3. Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)

    作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...

  4. atitit.管理学三大定律：彼得原理、墨菲定律、帕金森定律

    atitit.管理学三大定律:彼得原理.墨菲定律.帕金森定律 彼得原理(The Peter Principle) 1 彼得原理解决方案1 帕金森定律 2 如何理解墨菲定律2 彼得原理(The Pete ...

  5. Mysql 忘记root密码处理办法

    一.更改my.cnf配置文件 1.用命令编辑/etc/my.cnf配置文件,即:vim /etc/my.cnf 或者 vi /etc/my.cnf 2.在[mysqld]下添加skip-grant-t ...

  6. Centos6.x 下安装Jexus独立版

    操作步骤: #cd /tmp #wget linuxdot.net/down/jexus-5.8.1-x64.tar.gz 注:如果有新版本,则修改为相应版本号即可. #tar -zxvf jexus ...

  7. 一步步学习javascript基础篇（9）：ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  8. Chrome代码下载及编译

    2-3年前在做客户端开发时,看过CHROME的一部分代码,主要是BASE库相关的.其项目之大,编译时间之长给我留下了深刻的印象. 3年后的最近,想着再读一下其他部分的代码,所以就对其纠结的下载和编译过 ...

  9. ABP(现代ASP.NET样板开发框架)系列之9、ABP设置管理

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之9.ABP设置管理 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  10. Entity Framework 6 Recipes 2nd Edition（11-5）译 -> 从”模型定义”函数返回一个匿名类型

    11-5. 从”模型定义”函数返回一个匿名类型 问题 想创建一个返回一个匿名类型的”模型定义”函数 解决方案 假设已有游客(Visitor) 预订(reservation)房间(hotel ) 的模型 ...