Node学习笔记(四):gulp+express+io.socket部署angularJs2(填坑篇)
这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的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(填坑篇)的更多相关文章
- node学习笔记(四)
//Node.js标准库提供了http模块,其中封装了一个高效的http服务器和一个简易的http客户端 //http.Server是一个基于事件的HTTP服务器,它的核心由Node.js下层c++部 ...
- python学习笔记四 迭代器,生成器,装饰器(基础篇)
迭代器 __iter__方法返回一个迭代器,它是具有__next__方法的对象.在调用__next__方法时,迭代器会返回它的下一个值,若__next__方法调用迭代器 没有值返回,就会引发一个Sto ...
- Java IO学习笔记四:Socket基础
作者:Grey 原文地址:Java IO学习笔记四:Socket基础 准备两个Linux实例(安装好jdk1.8),我准备的两个实例的ip地址分别为: io1实例:192.168.205.138 io ...
- 零拷贝详解 Java NIO学习笔记四(零拷贝详解)
转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...
- muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制
目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...
- 官网实例详解-目录和实例简介-keras学习笔记四
官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras 版权声明: ...
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
随机推荐
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(81)-数据筛选(万能查询)
系列目录 前言 听标题的名字似乎是一个非常牛X复杂的功能,但是实际上它确实是非常复杂的,我们本节将演示如何实现对数据,进行组合查询(数据筛选) 我们都知道Excel中是如何筛选数据的.就像下面一样 他 ...
- 从零开始编写自己的C#框架(26)——小结
一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...
- iOS逆向工程之Hopper+LLDB调试第三方App
LLDB是Low Level Debugger的简称,在iOS开发的调试中LLDB是经常使用的,LLDB是Xcode内置的动态调试工具.使用LLDB可以动态的调试你的应用程序,如果你不做其他的额外处理 ...
- SDWebImage源码解读_之SDWebImageDecoder
第四篇 前言 首先,我们要弄明白一个问题? 为什么要对UIImage进行解码呢?难道不能直接使用吗? 其实不解码也是可以使用的,假如说我们通过imageNamed:来加载image,系统默认会在主线程 ...
- JS实现页面进入、返回定位到具体位置
最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...
- Solr高级查询Facet
一.什么是facet solr种以导航为目的的查询结果成为facet,在用户查询的结果上根据分类增加了count信息,然后用户根据count信息做进一步搜索. facet主要用于导航实现渐进式精确搜索 ...
- WPF 捕获键盘输入事件
最近修改的一个需求要求捕获键盘输入的 Text,包括各种标点符号. 最开始想到的是 PreviewKeyDown 或者 PreviewKeyUp 这样的键盘事件. 但是这两个事件的对象 KeyEven ...
- Javascript中的valueOf与toString
基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...
- 学习笔记:发现一个IE版本判断的好方法
web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题.在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法. 常规js方法 找到一个方法,还不错,可以识别出各 ...
- 机器指令翻译成 JavaScript —— No.6 深度优化
第一篇 中我们曾提到,JavaScript 最终还得经过浏览器来解析.因此可以把一些优化工作,交给脚本引擎来完成. 现代浏览器的优化能力确实很强,但是,运行时的优化终归是有限的.如果能在事先实现,则可 ...