上一篇.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. Unity 序列化 总结

    查找了 Script Serialization http://docs.unity3d.com/Manual/script-Serialization.html 自定义序列化及例子: http:// ...

  2. PowerShell实现批量重命名文件

    [string]$FileName="E:\test11" #-------------------------------------- Clear-Host foreach($ ...

  3. WPF 微信 MVVM

    公司的同事离职了,接下来的日子可能会忙碌,能完善DEMO的时间也会少了,因此,把做的简易DEMO整体先记录一下,等后续不断的完善. 参考两位大神的日志:WEB版微信协议部分功能分析.[完全开源]微信客 ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（76）-微信公众平台开发-网页授权

    前言 网页授权是:应用或者网站请求你用你的微信帐号登录,同意之后第三方应用可以获取你的个人信息 网上说了一大堆参数,实际很难理解和猜透,我们以实际的代码来演示比较通俗易懂 配置 实现之前我们必须配置用 ...

  5. C#数组,List,Dictionary的相互转换

    本篇文章会向大家实例讲述以下内容: 将数组转换为List 将List转换为数组 将数组转换为Dictionary 将Dictionary 转换为数组 将List转换为Dictionary 将Dicti ...

  6. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  7. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  8. HIVE教程

    完整PDF下载:<HIVE简明教程> 前言 Hive是对于数据仓库进行管理和分析的工具.但是不要被“数据仓库”这个词所吓倒,数据仓库是很复杂的东西,但是如果你会SQL,就会发现Hive是那 ...

  9. spider RPC入门指南

    本部分将介绍使用spider RPC开发分布式应用的客户端和服务端. spider RPC中间件基于J2SE 8开发,因此需要确保服务器上安装了JDK 8及以上版本,不依赖于任何额外需要独立安装和配置 ...

  10. Linux基础介绍【第八篇】

    Linux网络基础 网线 568A 568B 线序:橙白橙 绿白蓝 蓝白绿 棕白棕 交换机.路由器 交换机:DLINK.H3C.CISCO 交换机(Switch)是一种用于电信号转发的网络设备.它可以 ...