socket.io+angular.js+express.js做個聊天應用(三)

來源:互聯網
上載者:User

標籤:track   cache   open   項目   update   rip   詳細   against   dag   


接著前面部落格文章socket.io+angular.js+express.js做個聊天應用(二)


首先開發之前先介紹下bower。它是用來管理前端類庫的(詳細介紹,安裝可看http://blog.csdn.net/edagarli/article/details/26359535)


[email protected]:~/projects/nodejs/chattingnode$ bowerUsage:    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 versionOptions:    -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 rootSee 'bower help <command>' for more information on a specific command.


說明bower成功安裝!


使用bower來安裝bootstrap和angularjs


[email protected]:~/projects/nodejs/chattingnode$ bower install bootstrap angular --savebower 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.gzbower download      https://github.com/twbs/bootstrap/archive/v3.1.1.tar.gzbower extract       angular#* archive.tar.gzbower resolved      git://github.com/angular/bower-angular.git#1.2.16bower extract       bootstrap#* archive.tar.gzbower resolved      git://github.com/twbs/bootstrap.git#3.1.1bower cached        git://github.com/jquery/jquery.git#2.1.1bower validate      2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0bower install       angular#1.2.16bower install       bootstrap#3.1.1bower install       jquery#2.1.1bower no-json       No bower.json file to save to, use bower init to create oneangular#1.2.16 bower_components/angularbootstrap#3.1.1 bower_components/bootstrap└── jquery#2.1.1jquery#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做個聊天應用(三)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.