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

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

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

[email protected]:~/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

[email protected]:~/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

时间: 2024-10-03 19:50:45

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

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

node,express开发环境等安装假设已经搞好了. [email protected]:~/projects/nodejs$ express -e chattingnode create : chattingnode create : chattingnode/package.json create : chattingnode/app.js create : chattingnode/public create : chattingnode/public/javascripts creat

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

接着上一篇 我用的开发工具是sublime 打开之前创建的工程. 打开www 修改并添加代码 #!/usr/bin/env node var debug = require('debug')('my-application'); var app = require('../app'); var io=require("socket.io").listen(app.listen(app.get('port'))); app.set('port', process.env.PORT ||

Angular JS + Express JS入门搭建网站

3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后台主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便. 由此在项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS. 同时自己实现了一个最简单的Angular

node.js+Express.js+Jade+MongoDB开发Web即时聊天系统视频教程下载

ode.js+Express.js+Jade+MongoDB开发Web即时聊天系统视频教程下载  联系QQ:1026270010  一.课程背景 1.什么是Node.js ? Node.js 是一个可以快速构建网络服务及应用的平台 .该平台的构建是基于Chrome's JavaScript runtime,也就是说,实际上它是对Google V8引擎(应用于Google Chrome浏览器)进行了封装. V8引擎执行Javascript的速度非常快,性能非常好.Node对一些特殊用例进行了优化,

node.js高级编程|node.js 视频教程_基于node.js+Express.js+Jade+MongoDB实战开发

基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统课程讲师:幻星课程分类:前端开发适合人群:初级课时数量:36课时更新程度:完成用到技术:Node.js NPM. Express.NoSQL,MongoDB涉及项目:匿名聊天网站系统node.js视频教程:http://www.ibeifeng.com/goods-462.htmlnode.js 教程适合人群:node.js视频教程要求学员了解JavaScript,node.js入门教程适合希望更深入的学习N

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

接着上一篇 使用angularjs构建聊天室的client <!doctype html> <html ng-app="justChatting"> <head> <meta charset="UTF-8"> <title>justChatting</title> <link rel="stylesheet" href="/bower_components/b

基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统

本课程要求学员了解JavaScript,本课程适合希望更深入的学习Node.js,从事Web前端方向开发的大学生朋友,或者希望借助Node.js更优的性能与后台结合生产出更有价值的网站的在职程序员 咨询QQ:2199289905 课程目录 第一部分.理论讲解部分: 1.初识node.js 2.node.js特性 3.node.js核心库(console.Timers.util.Event) 4.node.js核心库(Buffer.Stream.FileSystem) 5.node.js核心库(F

使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方

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

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作者:潘良虎链接:https://www.zhihu.com/question/20215561/answer/26419995来源:知乎原文地址:http://www.plhwin.com/2014/05/28/nodejs-socketio/ WebSocket简介 谈到Web实时推送,就不得不说