上一篇.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服务器分支）的更多相关文章
-
.net core和angular2之前端篇—1
2016-10-20更新 今天的这篇文章还是一篇"Hello World",只不过开发环境有所改变--Visual Studio Code+Angular2+Webapck,也算是 ...
-
创建 Web 前端开发环境(node和npm以及git)
Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...
-
创建 Web 前端开发环境(node和npm)
Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...
-
手把手教你从购买vps到搭建一个node服务器
要准备什么? 1.5刀 2.最好有FQ软件(可以用蓝灯) let's Go! 一.vps购买 vps可以选择digital ocean(do) 链接 ,由于是外国网站,响应比较慢,所以最好翻个墙. g ...
-
koa-static node服务器设置静态目录
最近毕设需要用到上传照片,但当node服务器成功获取前端传来的图片时,又不知道如何在页面获取服务器image目录下的图片,一直报以下错误: 问题主要是无法找到图片url,虽然可以一个个在app.js文 ...
-
上传图片，通过node服务器存储在指定目录
最近做毕设,需要上传图片,因为在本地服务器运行,所以想着前端上传后,通过node服务器接收图片,存储在指定的目录下. 一.前端实现 1.前端的页面和上传图片是利用element-ui组件实现的,&qu ...
-
亚马逊EC2服务器申请+NODE服务器部署+阿里云域名申请+SSL证书使用
最近,由于项目需要,自己申请了一台亚马逊用于部署网站测试,在使用期间,发现网上没有一篇非常完整的文章讲解从服务器申请到域名解析,SSL证书申请的整个流程.所以自己总结一下,以供大家学习! 一.亚马逊E ...
-
使用express创建node服务器的两种方法及区别
使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen ...
-
Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
随机推荐
-
gRpc NET Core
NET Core下使用gRpc公开服务(SSL/TLS) 一.前言 前一阵子关于.NET的各大公众号都发表了关于gRpc的消息,而随之而来的就是一波关于.NET Core下如何使用的教程,但是在这众多 ...
-
linux rsync +inotify 实现 实时同步
前言: rsync可以实现触发式的文件同步,但是通过crontab守护进程方式进行触发,同步的数据和实际数据会有差异,而inotify可以监控文件系统的各种变化,当文件有任何变动时,就触发rs ...
-
一SERVLET （1）
转载自http://www.cnblogs.com/xdp-gacl/p/3760336.html 一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公 ...
-
The Arduino IDE(compiler)&#39;s float bug
1.通常直接使用串口的print函数就ok Serial.println(DHT.humidity); //assuming DHT.humidity is float 2.但是习惯问题,还是偏好s ...
-
PHP加水印代码 支持文字和图片水印
PHP加图片水印.文字水印类代码,PHP加水印类,支持文字图片水印的透明度设置.水印图片背景透明.自己写的一个类,因为自己开发的一套CMS中要用到,网上的总感觉用着不顺手,希望大家也喜欢这个类,后附有 ...
-
Hadoop3.0完全分布式集群安装部署
1. 配置为1个namenode(master主机),2个datanode(slave1主机+slave2主机)的hadoop集群模式, 在VMWare中构建3台运行Ubuntu的机器作为服务器: 关 ...
-
MySQL中间件之ProxySQL(8)：SQL语句的重写规则
返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.为什么要重写SQL语句 ProxySQL在收到前端发送来的SQL语 ...
-
CMakeLists
#cmake最低版本需求,不加入此行会受到警告信息CMAKE_MINIMUM_REQUIRED(VERSION 2.6)PROJECT(HELLO) #项目名称#把当前目录(.)下所有源代码文件和头文 ...
-
设置navigation的title
onReady(){ wx.setNavigationBarTitle({ title: this.data.title }); }
-
Git入门基础详情教程
前言 写了一篇文章<一篇文章了解Github和Git教程>还觉得不错,继续写了<为了Github默默付出,我想了解你>,那么继续写Git 基础知识. Git 官网:https: ...