版权声明:本文为博主原创文章,未经博主同意不得转载。 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. Protocol Framework - SNMP Tutorial

    30.4 Protocol Framework TCP/IP network management protocols2 divide the management problem into two ...

  2. Extreme Learning Machine(ELM)的工程哲学

    Extreme Learning Machine(ELM)的工程哲学 David_Wang2015 发布于2015年5月6日 11:29 工程问题往往需要的是一定精度范围内的结果,而不是“真正的”结果 ...

  3. js判断是否为正整数的正则写法 JavaScript正整数正则

    判断是否为正整数 JavaScript正则判断一串数字是否为正整数, 首先要明白这几个问题 1:javascript里会把一串数字前边的0自动屏蔽,(我不知道屏蔽这个词用的是否正确) console. ...

  4. 在HCI层ACL Connection的建立

    一.概述     上一篇博文介绍的是inquiry的整个过程中HCI层的command和event.在寻找到有效的远端蓝牙设备后,开始建立ACL连接,这里仅仅反应HCI层的数据包,对于LM层和Base ...

  5. sender是什么意思C#

    /// <summary> /// sender就是事件发起者,e存储事件发起者的一些参数 /// 例如: /// private void button1_Click(object se ...

  6. C语言中的声明解析规则——数组,指针与函数

    摘要:C语言的申明存在的最大问题是:你无法以一种人们所习惯的自然方式和从左向右阅读一个声明,在引入voliatile和const关键字以后,情况更加糟糕了.由于这些关键字只能出现在声明中,是的声明形式 ...

  7. Please ensure that adb is correctly located at &#39;...adb.exe&#39; and can be executed.

    Android Launch! The connection to adb is down, and a severe error has occured. You must restart adb ...

  8. 配置FMS发布/HDS/HLS流

    一.前言 安装完FMS4.5以后就有了apache2.2,由于在FMS安装目录里面,他是对外面已经安装的是没有影响的,默认情况向, FMS监听80端口接收traffic然后传递给Apache的8134 ...

  9. C#设计模式:责任链模式

    设计模式是面向对象编程的基础,是用于指导程序设计.在实际项目开发过程中,并不是一味将设计模式进行套用,也不是功能设计时大量引入设计模式.应该根据具体需求和要求应用适合的设计模式.设计模式是一个老话题了 ...

  10. Mybatis迷你版--QueryObjectFactory

    今天在看JDBC4.2新规范,然后无意之间就碰到了这个东西QueryObjectFactory, 市面上orm框架有很多,在这里我就不一一列举了.那么今天我来记录一下QueryObjectFactor ...