这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的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. 操作系统篇-分段机制与GDT|LDT

    || 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.前言     在<操作系统篇-浅谈实模式与保护模式>中提到了两种模式,我们说在操作系统中,其实大部分时间是待在保护模式中的. ...

  2. C#向PPT文档插入图片以及导出图片

    PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...

  3. Phantomjs+Nodejs+Mysql数据抓取(2.抓取图片)

    概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerkon/article/details/50868 ...

  4. Linux下编译安装Vim8.0

    什么是Vim? Vim 是经典的 UNIX 编辑器 Vi 的深度改良版本.它增加了许多功能,包括:多级撤销.格式高亮.命令行历史.在线帮助.拼写检查.文件名补完.块操作.脚本支持,等等.除了字符界面版 ...

  5. C#移动跨平台开发(1)环境准备

    C#依托于mono平台可以实现Unix平台服务器端开发已经不是什么新鲜事了,而Xarmain公司(初始成员大多来自原Mono.MonoTouch.Mono For Android成员)继续将C#的先进 ...

  6. Lesson 24 It could be worse

    Text I entered the hotel manager's office and sat down. I had just lost £50 and I felt very upset. ' ...

  7. 当前端也拥有 Server 的能力

    今天看了不少文章,比较感兴趣的是 Cache API.它是浏览器 Request/Response 的缓存管理工具,其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch A ...

  8. 【初探Spring】------Spring IOC(三):初始化过程---Resource定位

    我们知道Spring的IoC起到了一个容器的作用,其中装得都是各种各样的Bean.同时在我们刚刚开始学习Spring的时候都是通过xml文件来定义Bean,Spring会某种方式加载这些xml文件,然 ...

  9. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  10. Egret3D研究报告(二)从Unity3D导出场景到Egret3D

    Egret3D暂时没有场编的计划,但是我们知道unity3D是一个很好的场编. 有一些游戏即使不是使用Unity3D开发,也使用Unity3D做场编.这里就不点名了,而且并不在少数. 我们就这么干. ...