版权声明：本文为博主原创文章，未经博主同意不得转载。 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. Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室

    前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Ex ...

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

    node,express开发环境等安装如果已经搞好了. justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs$ express -e c ...

  9. 基于 Sequelize.js + Express.js 开发一套 Web 后端服务器

    什么是 Sequelize 我们知道 Web 应用开发中的 Web 后端开发一般都是 Java.Python.ASP.NET 等语言.十年前,Node.js 的出现使得原本仅限于运行在浏览器中的 Ja ...

随机推荐

  1. [design-patterns]设计模式之一策略模式

    设计模式 从今天开始开启设计模式专栏,我会系统的分析和总结每一个设计模式以及应用场景.那么首先,什么是设计模式呢,作为一个软件开发人员,程序人人都会写,但是写出一款逻辑清晰,扩展性强,可维护的程序就不 ...

  2. nfs 提高传输速度

    通常挂载 nfs 的命令为: mount -t nfs -o nolock 192.168.0.124:/home/admin/rootfs /mnt 之前我一直都是用这个命令来挂载,那个传输速度啊, ...

  3. C# ListBox 自动滚动到底部 方法:

    在ListBox中添加一条记录(ListBox.Items.Add方法)后,滚动条会自动回到顶部.我们可能更希望它自动滚动到底部,简要介绍几种方法. 方法一: this.listBox1.Items. ...

  4. 一个mui扩展插件mui.showLoading加载框【转】

    转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写 ...

  5. asp.net mvc5轻松实现插件式开发

    在研究Nopcommece项目代码的时候,发现Nop.Admin是作为独立项目开发的,但是部署的时候却是合在一起的,感觉挺好 这里把他这个部分单独抽离出来, 主要关键点: 确保你的项目是MVC5 而不 ...

  6. 140 - The 12th Zhejiang Provincial Collegiate Programming Contest（浙江省赛2015）

      Ace of Aces Time Limit: 2 Seconds      Memory Limit: 65536 KB There is a mysterious organization c ...

  7. Linux常用基本命令:三剑客命令之-sed

    sed是一个很强大的文件处理工具,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作 格式:sed [option] [command] [file] 常用命令: a   ∶新 ...

  8. 微信服务号获取openid方法

    public function tetst(){ if(!isset($_GET['code'])){ $APPID = $this->app_id; $ran = rand(1,100); / ...

  9. SPOJ GSS3 (动态dp)

    题意 题目链接 Sol 这题可以动态dp做. 设\(f[i]\)表示以\(i\)为结尾的最大子段和,\(g[i]\)表示\(1-i\)的最大子段和 那么 \(f[i] = max(f[i - 1] + ...

  10. 关于Android studio的安装和配置问题

    一.Android studio的安装 我们可以从中文社区http://www.android-studio.org/下载Android studio最新版本,然后点击安装即可. 之后我们直接运行an ...