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

最新推荐文章于 2021-01-04 14:37:06 发布

edagarli

最新推荐文章于 2021-01-04 14:37:06 发布

阅读量3.2k

点赞数

分类专栏： angularjs等前端大杂烩 nodejs nodejs开发实战文章标签： nodejs bootstrap angularjs

本文链接：https://blog.csdn.net/edagarli/article/details/27590611

版权

angularjs等前端大杂烩同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

nodejs

11 篇文章 0 订阅

订阅专栏

nodejs开发实战

4 篇文章 6 订阅

订阅专栏

接着前面博客文章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

edagarli

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
socket.io+angular.js+express.js做个聊天应用(三)

接着前面博客文章socket.io+angular.js+express.js做个聊天应用（二）首先开发之前先介绍下bower，它是用来管理前端类库的（具体介绍,安装可看http://blog.csdn.net/edagarli/article/details/26359535）justhacker@justhacker-ThinkPad-Edge-E440:~/proje
复制链接

扫一扫