版权声明:本文为博主原创文章,未经博主同意不得转载。 https://blog.csdn.net/www19940501a/article/details/27590611

接着前面博客文章socket.io+angular.js+express.js做个聊天应用(二)

首先开发之前先介绍下bower。它是用来管理前端类库的(详细介绍,安装可看http://blog.csdn.net/edagarli/article/details/26359535

justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs/chattingnode$ bower

Usage:

    bower <command> [<args>] [<options>]

Commands:

    cache                   Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
version Bump a package version Options: -f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --log-level What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
--allow-root Allows running commands as root See 'bower help <command>' for more information on a specific command.

说明bower成功安装!

使用bower来安装bootstrap和angularjs

justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs/chattingnode$ bower install bootstrap angular --save
bower not-cached git://github.com/twbs/bootstrap.git#*
bower resolve git://github.com/twbs/bootstrap.git#*
bower not-cached git://github.com/angular/bower-angular.git#*
bower resolve git://github.com/angular/bower-angular.git#*
bower download https://github.com/angular/bower-angular/archive/v1.2.16.tar.gz
bower download https://github.com/twbs/bootstrap/archive/v3.1.1.tar.gz
bower extract angular#* archive.tar.gz
bower resolved git://github.com/angular/bower-angular.git#1.2.16
bower extract bootstrap#* archive.tar.gz
bower resolved git://github.com/twbs/bootstrap.git#3.1.1
bower cached git://github.com/jquery/jquery.git#2.1.1
bower validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0
bower install angular#1.2.16
bower install bootstrap#3.1.1
bower install jquery#2.1.1
bower no-json No bower.json file to save to, use bower init to create one angular#1.2.16 bower_components/angular bootstrap#3.1.1 bower_components/bootstrap
└── jquery#2.1.1 jquery#2.1.1 bower_components/jquery

加入类库到index.ejs中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/components/bootstrap/dist/css/bootstrap.css' />
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
<script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="/components/angular/angular.js"></script>
</head>
<body>
<script type="text/javascript">
var socket=io.connect('/');
socket.on('connected',function(){
alert('connected to chattingRoom!');
});
</script>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>

项目源代码地址:https://github.com/edagarli/chattingnode

socket.io+angular.js+express.js做个聊天应用(三)的更多相关文章

  1. soket.io.js + angular.js + express.js(node.js)

    soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...

  2. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  3. socket.io+angular.js+express.js做个聊天应用(四)

    接着上一篇 使用angularjs构建聊天室的client <!doctype html> <html ng-app="justChatting"> < ...

  4. socket.io+angular.js+express.js做个聊天应用(二)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27585321 接着上一篇 我用的开发工具 ...

  5. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  6. 【socket.io研究】3.手机网页间聊天核心问题

    前面我们已经说了服务器相关的一些内容,且又根据官网给出的一个例子写了一个可以聊天的小程序,但是这还远远不够呀,这只能算是应用前的准备工作.接下来,一起来考虑完善一个小的聊天程序吧. 首先,修改服务器的 ...

  7. socket.io+angular.js+express.js做个聊天应用(一)

    node,express开发环境等安装如果已经搞好了. justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs$ express -e c ...

  8. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  9. (转)使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

随机推荐

  1. odoo8.0 win7 64位 安装配置(补遗)

    各种参考博客资源--http://www.cnblogs.com/yiguxianyun/p/6256641.html 最开始蛋疼问题的是安装各种site-packages! 云盘里面有些win764 ...

  2. 在where条件中使用CASE WHEN 语句

    CREATE TABLE TB_Test_Report ( id int identity, stateid int, userid int, username ) ) go ,,'a') ,,'b' ...

  3. 关于软件测试人员能力模型的建立(from知乎)

    转自: http://www.zhihu.com/question/20254092 测试思维方面:1.测试基础理论(测试流程.测试的基础知识)2.测试用例设计方法论(黑盒.白盒)3.软件质量体系(建 ...

  4. 使用Pager-taglib进行分页

    在.net中,我们有分页控件.在java中,我们有分页标签库.他们都已经为我们封装好了,我们只需要给这几个参数:数据.当前页码.每页记录数,就能完成分页,所以他们是大同小异的. 今天来说说Pager- ...

  5. sql存储过程通过ID删除两表中的数据。

    CREATE OR REPLACE PROCEDURE del_p --建立名为del_p 的过程 IS CURSOR get_abid --简历名为get_abid的cursor 用来存放a表的id ...

  6. Android之获取本地图片并压缩方法

    这两天在做项目时,做到上传图片功能一块时,碰到两个问题,一个是如何获取所选图片的路径,一个是如何压缩图片,在查了一些资料和看了别人写的后总算折腾出来了,在此记录一下. 首先既然要选择图片,我们就先要获 ...

  7. 【转】URL和URI的区别

    [转]URL和URI的区别 译者:华科小涛:http://www.cnblogs.com/hust-ghtao/: 初学http协议,就被这两个相似的术语搞蒙了,查了很多资料,总算搞清楚了.(找资料还 ...

  8. redis源码分析之发布订阅(pub/sub)

    redis算是缓存界的老大哥了,最近做的事情对redis依赖较多,使用了里面的发布订阅功能,事务功能以及SortedSet等数据结构,后面准备好好学习总结一下redis的一些知识点. 原文地址:htt ...

  9. poj 1269 线段与线段相交

    Intersecting Lines Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 13605   Accepted: 60 ...

  10. FCC(ES6写法) Exact Change

    设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) 作为第三个参数. cid  ...