socket.io+angular.js+express.js做个聊天应用(三)
2017-07-22 21:29
441 查看
接着前面博客文章socket.io+angular.js+express.js做个聊天应用(二)
首先开发之前先介绍下bower。它是用来管理前端类库的(详细介绍,安装可看http://blog.csdn.net/edagarli/article/details/26359535)
说明bower成功安装!
使用bower来安装bootstrap和angularjs
加入类库到index.ejs中
项目源代码地址:https://github.com/edagarli/chattingnode
首先开发之前先介绍下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做个聊天应用(四)
- socket.io+angular.js+express.js做个聊天应用(一)
- socket.io+angular.js+express.js做个聊天应用(四)
- socket.io+angular.js+express.js做个聊天应用(一)
- socket.io+angular.js+express.js做个聊天应用(二)
- socket.io+angular.js+express.js做个聊天应用(二)
- socket.io+angular.js+express.js做个聊天应用(三)
- NodeJS+Socket.io+ExpressJS实现web聊天应用
- Node+Express+MongoDB+Socket.io搭建实时聊天应用实战教程(一)--MongoDB入门
- Node+Express+MongoDB + Socket.io搭建实时聊天应用
- vue.js+socket.io+express+mongodb打造在线聊天[二]
- vue.js+socket.io+express+mongodb打造在线聊天[一]
- 使用express + socket.io实现多房间聊天应用
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(三)--前后端环境配置
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建
- 基于socket.io+express实现多房间聊天
- 基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现
- TWaver HTML5 + Node.js + express + socket.io + redis(六)
- 使用Node.js+Socket.IO搭建WebSocket实时应用
- 使用Node.js+Socket.IO搭建WebSocket实时应用 分类: Android网络 2014-06-29 12:25 144人阅读 评论(0) 收藏