版权声明：本文为博主原创文章，未经博主同意不得转载。 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. jobss目录结构

    一. JBoss的目录结构       bin:包含各种脚本文件以及相关文件,比如run.bat和shutdown.bat批处理文件.        client:存储配置信息和可能被Java客户端应 ...

  2. SpringBoot(4) SpringBoot热部署

    热部署,就是在应用正在运行的时候升级软件,却不需要重新启动应用. 使用springboot结合dev-tool工具,快速加载启动应用 官方地址:https://docs.spring.io/sprin ...

  3. 深入理解JavaScript的事件循环（Event Loop）

    一.什么是事件循环 JS的代码执行是基于一种事件循环的机制,之所以称作事件循环,MDN给出的解释为 因为它经常被用于类似如下的方式来实现 while (queue.waitForMessage()) ...

  4. RMQ问题（Sparse-Table算法）

    范围最值问题(Range Minimum/maximum Query,RMQ).给出一个哪个元素的数组A1,A2,...An,要求设计一个数据结构,支持查询操作:计算min(AL,AL+1,...,A ...

  5. 转STM32官方固件库简介

    ST(意法半导体)为了方便用户开发程序,提供了一套丰富的 STM32 固件库.固件库就是函数的集合,固件库函数的作用是向下负责与寄存器直接打交道,向上提供用户函数调用的接口(API) .固件库将这些寄 ...

  6. Docker 安装 mongoDB（五）

    Docker 安装 mongoDB 1.搜索docker镜像(可以看到搜索的结果,这个结果是按照一定的星级评价规则排序的) docker search mongo 2.拉取docker的mongo镜像 ...

  7. 【Spring】23、ApplicationContext ，ApplicationContextAware，Listener，Event 的关系解读

    tomcat容器启动流程 启动tomcat容器,加载web.xml,建立整个容器(Servlet容器,这里是tomcat吧)的上下文,ServletContext,这时web.xml有个监听器,就是C ...

  8. PHP: Browser, Operating System (OS), Device, and Language Detect

    https://github.com/sinergi/php-browser-detector Device.php: <!DOCTYPE html> <html> <h ...

  9. 前端面试整理——javascript算法和测试题

    (1)算法: 1.斐波那契数列:1.1.2.3.5.8.13.21.输入n,输出数列中第n位数的值. 方案一: function fn(n){ var num1 = 1, num2= 1, num3 ...

  10. Wepy在VScode中的高亮显示

    小程序的wepy框架会生成后缀名为.wpy的文件,此文件用VScode打开时并不是高亮的,官方文档给我们提供了两种方案进行高亮 方案一:   1. 在 Code 里先安装 Vue 的语法高亮插件 Ve ...