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

时间:2023-12-06 12:13:26

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