版权声明：本文为博主原创文章，未经博主同意不得转载。 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. MySQL中MyISAM和InnoDB两种主流存储引擎的特点

    一.数据库引擎(Engines)的概念 MySQ5.6L的架构图: MySQL的存储引擎全称为(Pluggable Storage Engines)插件式存储引擎.MySQL的所有逻辑概念,包括SQL ...

  2. T-SQL:事务锁下的并发处理（十五）

    1.事务 在sql  servce 中 事务是一个工作单元 可能包含查询和修改数据以及修改数据定义等多个活动 也可以显示或隐式定义事务边界 显示定义事务 BEGIN TRAN 开始  如果要提交事务 ...

  3. MySQL中表名重命名

    第一种办法:##修改表名, TO 或AS都可以,也以省略掉 ## ALTER TABLE 表名 RENAME [TO|AS] 新表名 ALTER TABLE user10 RENAME TO user ...

  4. SVN多分支开发模式V1.0.1

    1目的 规范开发模式过程,指导项目研发.质控测试.DevOps的相关活动. 2适用范围 本规范的作用范围是为互联网软件产品相关项目开发模式的管理过程. (1)   对项目团队中研发人员在开发模式过程中 ...

  5. Java基础回顾Application（二）

    application对象 1 什么是application对象 ? (1) 当Web服务器启动时,Web服务器会自动创建一个application对象.application对象一旦创建,它将一直存 ...

  6. CSS常见布局

    一.单列布局 1. 水平居中 1.1 使用inline-block和text-align .parent{text-align:center;} .child{display:inline-block ...

  7. javascript: checked 不可全选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【读书笔记】iOS-离线可用的Web应用

    众所周知,网页不光需要靠互联网接入访问才能提供各种形式的服务,而且连网页自身的各种设计元素也需要在有网接入的情况上才能获得. 但借助于HTML5的离线特性,我们可以通过把各种类型的资源都储存在Web应 ...

  9. 从零开始学习html（二）认识标签(第一部分)——上

    一.语义化,让你的网页更好的被搜索引擎理 学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化. 那么什么叫 ...

  10. 导入数据到MongoDB中

    import sys import json import pymongo import datetime from pymongo import MongoClient client = Mongo ...