上一篇.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. Windows Server 2012 NIC Teaming介绍及注意事项

    Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...

  2. MVVM框架从WPF移植到UWP遇到的问题和解决方法

    MVVM框架从WPF移植到UWP遇到的问题和解决方法 0x00 起因 这几天开始学习UWP了,之前有WPF经验,所以总体感觉还可以,看了一些基础概念和主题,写了几个测试程序,突然想起来了前一段时间在W ...

  3. setTimeout 的黑魔法

    setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字--定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次 ...

  4. ASP.NET Core的路由[4]：来认识一下实现路由的RouterMiddleware中间件

    虽然ASP.NET Core应用的路由是通过RouterMiddleware这个中间件来完成的,但是具体的路由解析功能都落在指定的Router对象上,不过我们依然有必要以代码实现的角度来介绍一下这个中 ...

  5. jQuery学习之路（6）- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  6. 2016/12/31_Python

    今天学习主要内容: Python: 1.with语句(补充昨天的文件操作) 用with打开的文件在脚本结束会自动关闭,以防普通打开方式忘记关闭文件连接 语法: with open("demo ...

  7. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  8. Linux下用netstat查看网络状态、端口状态（转）

    转:http://blog.csdn.net/guodongdongnumber1/article/details/11383019 在linux一般使用netstat 来查看系统端口使用情况步.  ...

  9. [Django]用户权限学习系列之User权限基本操作指令

    针对Django 后台自带的用户管理系统,虽说感觉还可以,但是为了方便用户一些操作,特别设计自定义的用户权限管理系统. 在制作权限页面前,首先需要了解权限和用户配置权限的指令,上章讲到权限的添加,删除 ...

  10. Mac OS X 上编写 ASP.NET vNext (二) IDE配置

    上一篇中介绍了如何在OS X上搭建.Net运行时.不过光有运行时还不够,还需要有一个好用的IDE,有了IDE的支持,OS X上的开发才称为可能. 和上篇类似,这里先列举出具体步骤,个人可以根据自己的情 ...