上一篇.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. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  2. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  3. CSS十问——好奇心+刨根问底=CSSer

    最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...

  4. Dapper逆天入门~强类型，动态类型，多映射，多返回值，增删改查+存储过程+事物案例演示

    Dapper的牛逼就不扯蛋了,答应群友做个入门Demo的,现有园友需要,那么公开分享一下: 完整Demo:http://pan.baidu.com/s/1i3TcEzj 注 意 事 项:http:// ...

  5. svn 常用命令总结

    svn 命令篇 svn pget svn:ignore // 查看忽略项 svn commit -m "提交说明" // 提交修改 svn up(update) // 获取最新版本 ...

  6. CRL快速开发框架系列教程九(导入/导出数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  7. 【HanLP】HanLP中文自然语言处理工具实例演练

    HanLP中文自然语言处理工具实例演练 作者:白宁超 2016年11月25日13:45:13 摘要:HanLP是hankcs个人完成一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环 ...

  8. https 安全验证问题

    最近为了满足苹果的 https 要求, 经过努力终于写出了方法 验证 SSL 证书是否满足 ATS 要求 nscurl --ats-diagnostics --verbose https://你的域名 ...

  9. git图像化界面GUI的使用

    GIT学习笔记 一.        基础内容 1.git是一个版本控制软件,与svn类似,特点是分布式管理,不需要中间总的服务器,可以增加很多分支. 2.windows下的git叫msysgit,下载 ...

  10. topshelf和quartz内部分享

    阅读目录: 介绍 基础用法 调试及安装 可选配置 多实例支持及相关资料 quartz.net 上月在公司内部的一次分享,现把PPT及部分交流内容整理成博客. 介绍 topshelf是创建windows ...