这篇就先暂停下上篇博客--你画我猜的进度，因为在做这个游戏的时候，想采用最新的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端口上的相对路径，明显跨域，你画我猜的主体框架算是搞定了。。。。。唔，人家的那叫编程之旅，我这叫填坑之旅啊，哈哈