socket.io+angular.js+express.js做個聊天應用(三)
接著前面部落格文章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做個聊天應用(一)AngularJSExpress
- socket.io+angular.js+express.js做個聊天應用(二)AngularJSExpress
- socket.io+angular.js+express.js做個聊天應用(四)AngularJSExpress
- 5個開源聊天應用程式
- 用 Swift 做一個智慧機器人聊天 App (1)Swift機器人APP
- 用 Swift 做一個智慧機器人聊天 App (2)Swift機器人APP
- 用 Swift 做一個智慧機器人聊天 App (4)Swift機器人APP
- 10 個用於網站的免費聊天應用網站
- 全球十大聊天應用 微信竟未進前三
- 用jQuery Mobile做HTML5移動應用的三個優缺點jQueryHTML
- 基於 WebRTC 與 Webcam 開發一個聊天應用Web
- WEB例項:開發一個聊天室應用Web
- 用Python做一個三階拼圖。Python
- 如何使用python做一個聊天小程式?Python
- 使用 Socket.io 和 React 開發一個聊天應用React
- Angular做一個筆記文章管理應用Angular筆記
- 用vue全家桶+koa2+soket.io +mysql寫一個聊天應用VueMySql
- 打造一個window桌面應用:線上聊天對話機器人機器人
- 用 Git 作為聊天應用的後端Git後端
- 做一個可除錯的Android應用除錯Android
- 用Python基於Google Bard做一個互動式的聊天機器人PythonGo機器人
- 在語音聊天原始碼中實現一個滿天星效果,應該如何做?原始碼
- java小課設:使用MySQL做一個聊天室JavaMySql
- 基於 Flutter+Dart 仿微信 App 聊天應用|flutter 聊天介面FlutterDartAPP
- 開源專案:採用 Laravel 編寫的一個聊天應用 Laravel-ChatLaravel
- 基於Flutter的仿微信聊天應用Flutter
- 使用SignalR構建聊天應用程式SignalR
- 一款極簡的聊天應用
- 做一個可以聊天的 Visual Studio Code 外掛
- React全家桶+Egg 做一個協作聊天室~React
- 初用SOCKET做聊天室程式後所想到的…… (轉)
- [應用案例]一個基金管理工具,做來自己用的
- [教程] 實現視訊對話應用 HouseParty教程(三)—— 多人聊天|附 iOS 原始碼iOS原始碼
- 介面無小事(三):用RecyclerView + Toolbar做個檔案選擇器View
- 後端開發者從零做一個移動應用(一)後端
- 使用Service Worker做一個PWA離線網頁應用網頁
- Laravel 整合 workerman 做聊天室Laravel
- 聊天室應用開發實踐(一)