这篇就先暂停下上篇博客--你画我猜的进度，因为在做这个游戏的时候，想采用最新的ng2技术，奈何坑是一片又一片，这边就先介绍下环境部署和填坑史

既然要用ng2，首先要拿到资源，我这边用的是angularJs2 beta版的，网上的资源有两种，一个是文件全压缩版的.min.js版的另一个就是一大堆乱七八糟的js文件，主要是ng2已经完全采用TypeScript，加之对es6的支持，所以需要引入一大堆兼容，编译文件

这边刚好特别手欠想学学gulp，于是开搞配置gulp环境，压缩所有的js文件成一个min.js文件

var gulp = require("gulp"),

    concat = require("gulp-concat"),

    uglify = require("gulp-uglify");

gulp.task("default",function(){

    return gulp.src([

            "src/angular2-polyfills.js",

            "src/system.js",

            "src/typescript.js",

            "src/Rx.js",

            "src/angular2.dev.js",

            "src/http.dev.js",

            "src/router.dev.js",

            "src/tsloader.js",

            "src/system.config.js"

        ])

    .pipe(concat("angular2.beta.stack.min.js"))

        .pipe(uglify())

        .pipe(gulp.dest("dist"));

});

玩完gulp，又把grunt玩了一遍，不得不说事物必有其存在的道理，丰富的库支持给了grunt巨大的使用市场，而gulp的语法精简，学习周期也大大缩短使其拥有更大的前景，啧啧，用完就两个字，爽！

碎碎念完，开始说说express+io.socket配置，socket.io配置就不多说了，在上一篇你画我猜讲的很清楚了，传送门，这边我之所以引入express模块的原因，只有一个：路由！！

因为node配置非常底层，路由还需要自己写，比如我访问natureless:8100是没有问题的，因为我在server.js中配置了端口的指向

var app = require('http').createServer(handler);

function handler (req, res) {

  console.log(req);

  fs.readFile(__dirname + '/app.html',

  function (err, data) {

    if (err) {

      res.writeHead(500);

      return res.end('Error loading index.html');

    }

    res.writeHead(200);

    res.end(data);

  });

}

而我想访问与app.html作为同级目录出现的index.html，通过natureless.cn:8100/index.html访问是无效的因为node拿到get数据index.html他不知道该如何处理，需要自己手动配置，开始的时候，我的想法是对req的消息进行处理，很有耐心的fs.readFile(__dirname+'XX路径')，但是邂逅度娘后，知道express有专门针对静态文件访问的中间件express.static()

app.use(express.static('src'));

这样我们把我们的template都可以放在src中，通过我们熟悉的相对路径就可以访问，引用文件了，这边把服务端的代码贴上

var express=require('express');

var app=express();

var http = require('http').createServer(app);

var io = require('socket.io')(http);

var fs = require('fs');

app.use(express.static('src'));

app.get('/', function (req, res) {

   res.sendFile( __dirname + "/" + "app.html" );

})

http.listen(8100,function(){

    console.log('Natureless server begin...');

});

io.sockets.on('connection', function (socket) {

  socket.emit('news', { hello: 'world' });

  socket.on('startConnect', function (data) {

    io.sockets.emit('news',data);

  });

});

其实之所以有如此多的问题，主要源于环境是node配置，我在引入ng2时，只要牵涉路径的问题就各种报错，比如templateUrl

下面贴上app.html代码

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>test</title>

    <script type="text/javascript" src="/js/angular2.beta.stack.min.js"></script>

</head>

<body>

    <ez-app></ez-app>

    <script type="text/typescript">

        import {Component} from "angular2/core";

        import {bootstrap} from "angular2/platform/browser";

        @Component({

            selector:"ez-app",

            templateUrl : '/view/gameRoom.html'

        })

        class EzApp{}

        bootstrap(EzApp);

    </script>

</body>

</html>

卡在templateUrl整整三天，各种采坑，最愚笨的问题莫过8100端口上还用80端口上的相对路径，明显跨域，你画我猜的主体框架算是搞定了。。。。。唔，人家的那叫编程之旅，我这叫填坑之旅啊，哈哈

Node学习笔记（四）：gulp+express+io.socket部署angularJs2（填坑篇）的更多相关文章

  1. node学习笔记(四)

    //Node.js标准库提供了http模块,其中封装了一个高效的http服务器和一个简易的http客户端 //http.Server是一个基于事件的HTTP服务器,它的核心由Node.js下层c++部 ...

  2. python学习笔记四 迭代器，生成器，装饰器（基础篇）

    迭代器 __iter__方法返回一个迭代器,它是具有__next__方法的对象.在调用__next__方法时,迭代器会返回它的下一个值,若__next__方法调用迭代器 没有值返回,就会引发一个Sto ...

  3. Java IO学习笔记四：Socket基础

    作者:Grey 原文地址:Java IO学习笔记四:Socket基础 准备两个Linux实例(安装好jdk1.8),我准备的两个实例的ip地址分别为: io1实例:192.168.205.138 io ...

  4. 零拷贝详解 Java NIO学习笔记四（零拷贝详解）

    转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...

  5. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

  6. 官网实例详解-目录和实例简介-keras学习笔记四

    官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras   版权声明: ...

  7. C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  8. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  9. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

随机推荐

  1. NET Core-学习笔记（三）

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  2. Visual Studio 2012远程调试中遇到的问题

    有的时候开发环境没问题的代码在生产环境中会某些开发环境无法重现的问题,或者需要对生产环境代码进行远程调试该怎么办? Vs已经提供给开发者远程调试的工具 下面简单讲讲该怎么用,前期准备:1.本地登录账户 ...

  3. 【原创分享·微信支付】 C# MVC 微信支付教程系列之公众号支付

    微信支付教程系列之公众号支付         今天,我们接着讲微信支付的系列教程,前面,我们讲了这个微信红包和扫码支付.现在,我们讲讲这个公众号支付.公众号支付的应用环境常见的用户通过公众号,然后再通 ...

  4. UWP开发必备：常用数据列表控件汇总比较

    今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...

  5. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  6. Javacript实现字典结构

    字典是一种用[键,值]形式存储元素的数据结构.也称作映射,ECMAScript6中,原生用Map实现了字典结构. 下面代码是尝试用JS的Object对象来模拟实现一个字典结构. <script& ...

  7. spring maven pom.xml设置

    spring pom.xml设置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  8. 云计算下PAAS的解析一

    云计算下PAAS的解析一       PaaS是Platform-as-a-Service的缩写,意思是平台即服务. 把服务器平台作为一种服务提供的商业模式.通过网络进行程序提供的服务称之为SaaS( ...

  9. 新手学习web遇到的一些乱码问题

    在新手学习web网站学习的时候经常会遇到?????这种乱码,对于刚起步的菜鸟来说真的很头痛,很容易打击继续学的信心当然了对于菜鸟的我最近也遇到过乱码问题,沉浸其中不能自拔,爱的深啊!!!!!我所遇到的 ...

  10. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...