接着前面博客文章 socket.io+angular.JS+express.JS 做个聊天应用 (二)
首先开发之前先介绍下 bower. 它是用来管理前端类库的 (详细介绍, 安装可看)
- justhacker@justhacker-ThinkPad-Edge-E440:~/projects/Node.JS/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/Node.JS/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>
- <%=t itle %>
- </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>
- <%=t itle %>
- </h1>
- <p>
- Welcome to
- <%=t itle %>
- </p>
- </body>
- </HTML>
项目源代码地址: https://github.com/edagarli/chattingnode
来源: http://www.bubuko.com/infodetail-2978300.html