版权声明：本文为博主原创文章，未经博主同意不得转载。 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. idea集成uglifyjs2

    项目中可能会多次修改某些*.js文件,但是引用的是*.min.js, 所以需要再改完源码后生成压缩的min.js uglifyjs是个不错的工具,但是单独用略显麻烦,如果能整合到idea就好了.正好i ...

  2. Uboot 引导内核时加载地址与入口地址问题

    如果使用 mkimage 生成内核镜像文件的话,会在内核的前头加上了 64 bytes 的信息头,供建立 tag 之用.bootm 命令会首先判断 bootm xxx 这个指定的地址 xxx 与 -a ...

  3. [转]微擎MVC

    本文转自:https://www.kancloud.cn/donknap/we7/134626 控制器 控制器以文件夹.文件的形式组织,位于系统的 source 目录下,每一个目录代表一个 contr ...

  4. SignalR的简单实现消息广播

    之前由于一个项目的需要(简单说一下,一个网页游戏,裁判的页面点击开始按钮,玩家便可以开始游戏),研究了很久,最终一个同事跟我推荐了SignalR.距离项目结束已经有一段时间了,再来回顾一下Signal ...

  5. AJAX 实战【三级联动】分析

    使用 AJAX 对全国地名进行选取 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo ...

  6. LINQ 小项目【组合查询、分页】

    使用 linq 在网页上对用户信息增删改,组合查询,分页显示 using System; using System.Collections.Generic; using System.Linq; us ...

  7. 【redis】7、redis用法总结

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 一.redis优点 Redis支持数据的持久化,可以将内存中 ...

  8. 【Java深入研究】2、JDK 1.8 LinkedList源码解析

    LinkedList是一个实现了List接口和Deque接口的双端链表. 有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedList不 ...

  9. Why in the code “456”+1, output is “56”

    Question: #include <iostream> int main() { std::cout << "25"+1; return 0; } I ...

  10. React中使用百度地图API

    今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用 ...