快速搭建Web环境 Angularjs + Express3 + Bootstrap3

AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多 的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后 台技术融入前端开发,扫去jQuery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。

关于作者

  • 张丹(Conan), 程序员Java,R,PHP,Javascript
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/angularjs-express3-bootstrap3/

前言

Angularjs越用越顺手,不仅代码量比jQuery少很多,而且实现思路特别清晰,构建大型的Web前端项目,真是最适合不过了。

Bootstrap让界面美观大方,就连像我这种不懂UE的人,也能做出专业级的水准。再结合Nodejs的Express做后端,三剑合并,太无敌了,大有统一前端开发的趋势,前途不可估量!

目录

  1. 从零开始手工创建Express3项目
  2. 新建Angularjs目录及文件
  3. 配置bower
  4. 配置Angularjs项目
  5. 增加Bootstrap
  6. 完整的项目

1. 从零开始手工创建Express3项目

系统环境:

  • Win7 64bit 旗舰版
  • node v0.10.5
  • npm 1.2.19
  • bower 1.1.2

本文截图中使用的开发工具是WebStorm,请参考文章:AngularJS最理想开发工具WebStorm

创建express项目


  1. ~ D:\workspace\javascript>express -e angular-basic
  2. ~ D:\workspace\javascript>cd angular-basic && npm install

生成的express项目目录

修改app.js的配置

  • 修改ejs: 文件扩展名ejs为html
  • 设置angular: 启动路径为”/”
  • 设置angular: 启动文件为app/index.html

  1. ~ vi app.js
  2. var express = require('express')
  3. , path = require('path')
  4. , ejs = require('ejs')
  5. , app = express()
  6. , server = require('http').createServer(app);
  7. app.set('port', process.env.PORT || 3000);
  8. app.set('views', __dirname + '/views');
  9. app.engine('.html', ejs.__express);
  10. app.set('view engine', 'html'); //替换文件扩展名ejs为html
  11. app.use(express.favicon());
  12. app.use(express.logger('dev'));
  13. app.use(express.bodyParser());
  14. app.use(express.methodOverride());
  15. app.use(app.router);
  16. app.use(express.static(path.join(__dirname, 'app')));
  17. if (app.get('env') === 'development') {
  18. app.use(express.errorHandler());
  19. }
  20. // angular启动页
  21. app.get('/', function (req, res) {
  22. res.sendfile('app/index.html');
  23. });
  24. server.listen(app.get('port'), function () {
  25. console.log('Express server listening on port ' + app.get('port'));
  26. });

如何单独创建Express3的项目,请参考文章:Nodejs开发框架Express3.0开发手记–从零开始

2. 新建Angularjs目录及文件

创建Angularjs需要的目录及文件


  1. D:\workspace\javascript\angular-basic>mkdir app
  2. D:\workspace\javascript\angular-basic>mkdir app\scripts
  3. D:\workspace\javascript\angular-basic>mkdir app\scripts\angular
  4. D:\workspace\javascript\angular-basic>mkdir app\styles
  5. D:\workspace\javascript\angular-basic>mkdir app\views
  6. D:\workspace\javascript\angular-basic>mkdir app\views\component
  7. D:\workspace\javascript\angular-basic>mkdir app\views\tpl
  8. D:\workspace\javascript\angular-basic>touch app\index.html
  9. D:\workspace\javascript\angular-basic>touch app\scripts\angular\app.js
  10. D:\workspace\javascript\angular-basic>touch app\scripts\angular\controllers.js
  11. D:\workspace\javascript\angular-basic>touch app\styles\main.css
  12. D:\workspace\javascript\angular-basic>touch app\views\tpl\welcome.html
  13. D:\workspace\javascript\angular-basic>echo "aaaa" > app\index.html

创建的Angularjs目录及文件

目录解释:

  • app目录: Angular项目的根目录
  • scripts目录: 存放Javascript脚本目录
  • scripts\angular目录: 存放Angular Javascript脚本目录
  • styles目录: 存放css的目录
  • views目录: 存放html的目录
  • views\component目录: 存放html的自定义组件目录
  • views\tpl目录: 存放html的目录

文件解释:

  • app\index.html: Angular项目的入口文件
  • styles\main.css: Angular项目的css文件
  • scripts\angular\app.js: Angular项目全局配置文件
  • scripts\angular\controllers.js: Angular项目全局控制器文件/li>
  • views\tpl\welcome.html: 欢迎页

删除不需要的文件目录


  1. D:\workspace\javascript\angular-basic>rm -rf public
  2. D:\workspace\javascript\angular-basic>rm -rf routes

启动node服务器,检查入口页的配置


  1. D:\workspace\javascript\angular-basic>node app.js
  2. Express server listening on port 3000
  3. GET / 200 11ms - 9b

界面显示”aaaa”,说明node启动express,已经指向到app\index.html的页面。

3. 配置bower

接下来,我要通过bower来安装Angularjs和Bootstrap,以及其他依赖的前端库。关于bower的详细使用,请参考文章:bower解决js的依赖管理

新建文件:

    • .bowerrc: bower的环境设置,用于指定bower的依赖库的存放位置
    • bower.json: bower的依赖管理

新建文件: .bowerrc


  1. ~ vi .bowerrc
  2. {
  3. "directory": "app/bower_components"
  4. }

新建文件: bower.json


  1. ~ vi bower.json
  2. {
  3. "name": "angular-basic",
  4. "version": "0.0.1",
  5. "dependencies": {
  6. "angular": "~1.2.12-build.2226",
  7. "angular-route": "~1.2.12-build.2226"
  8. },
  9. "devDependencies": {
  10. }
  11. }

运行bower,下载Angular依赖库


  1. D:\workspace\javascript\angular-basic>bower install
  2. bower angular-route#~1.2.12-build.2226 cached git://github.com/angular/bower-angular-route.git#1.2.13-build.2242
  3. bower angular-route#~1.2.12-build.2226 validate 1.2.13-build.2242 against git://github.com/angular/bower-angular-route.git#~1.2.12-build.2226
  4. bower angular#~1.2.12-build.2226 cached git://github.com/angular/bower-angular.git#1.2.13-build.2242
  5. bower angular#~1.2.12-build.2226 validate 1.2.13-build.2242 against git://github.com/angular/bower-angular.git#~1.2.12-build.2226
  6. bower angular#1.2.13-build.2242+sha.e645f7c cached git://github.com/angular/bower-angular.git#1.2.13-build.2242
  7. bower angular#1.2.13-build.2242+sha.e645f7c validate 1.2.13-build.2242 against git://github.com/angular/bower-angular.git#1.2.13-build.2242+sha.e645f7c
  8. bower angular-route#~1.2.12-build.2226 install angular-route#1.2.13-build.2242
  9. bower angular#~1.2.12-build.2226 install angular#1.2.13-build.2242
  10. angular-route#1.2.13-build.2242 app\bower_components\angular-route
  11. └── angular#1.2.13-build.2242
  12. angular#1.2.13-build.2242 app\bower_components\angular

下载最新版本的angular和angular-route,类库存放在app/bower_components目录下面。

4. 配置Angularjs项目

  • 修改index.html: 在入口文件,页面模板
  • 修改welcome.html: 欢迎页
  • 修改app.js: 全局配置
  • 修改controller.js: 控制器

修改index.html


  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Angular-basic</title>
  6. <meta name="description" content="Copyright http://blog.fens.me">
  7. <link rel="stylesheet" href="styles/main.css">
  8. </head>
  9. <body ng-app="app">
  10. <ul>
  11. <li><a href="http://blog.fens.me/angularjs-express3-bootstrap3/">快速搭建Web环境 Angularjs + Express3 + Bootstrap3</a></li>
  12. <li>http://blog.fens.me/angularjs-express3-bootstrap3</li>
  13. </ul>
  14. <div ng-view></div>
  15. <script src="bower_components/angular/angular.min.js"></script>
  16. <script src="bower_components/angular-route/angular-route.min.js"></script>
  17. <script src="scripts/angular/app.js"></script>
  18. <script src="scripts/angular/controllers.js"></script>
  19. </body>
  20. </html>

修改welcome.html


  1. Welcome {{ username }}

修改app.js


  1. 'use strict';
  2. var app = angular.module('app', ['ngRoute']);
  3. app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
  4. $routeProvider
  5. .when('/', {templateUrl: '/views/tpl/welcome.html', controller: 'WelcomeCtrl'})
  6. .otherwise({redirectTo: '/'});
  7. $locationProvider.html5Mode(true);
  8. }]);

修改controller.js


  1. 'use strict';
  2. function WelcomeCtrl($scope){
  3. $scope.username = 'Conan_Z';
  4. }

重新启动node,查看Angular项目。


  1. D:\workspace\javascript\angular-basic>node app.js
  2. Express server listening on port 3000
  3. GET / 304 8ms
  4. GET /styles/main.css 304 3ms
  5. GET /scripts/angular/app.js 304 6ms
  6. GET /scripts/angular/controllers.js 304 11ms
  7. GET /bower_components/angular-route/angular-route.min.js 200 18ms - 3.82kb
  8. GET /bower_components/angular/angular.min.js 200 19ms - 98.03kb
  9. GET /views/tpl/welcome.html 304 9ms
  10. GET /bower_components/angular-route/angular-route.min.js.map 200 21ms - 9.61kb
  11. GET /bower_components/angular/angular.min.js.map 200 26ms - 264.16kb

界面显示:

index.html中配置的链接已经显示,同时welcome.html页面中配置的Welcome Conan_Z,也显示出来了。关于路由和模板配置,请参考文章:AngularJS路由和模板

5. 增加Bootstrap

接下来,增加Bootstrap-v3,让界面好看起来。我们还是有bower来管理Bootstrap的依赖。

通过命令行,增加类库,并写入的bower.json文件


  1. D:\workspace\javascript\angular-basic>bower install bootstrap --save
  2. D:\workspace\javascript\angular-basic>bower install angular-bootstrap --save
  • 修改index.html: 增加css, js的引用
  • 修改welcome.html: 增加bootstrap的效果

修改index.html


  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Angular-basic</title>
  6. <meta name="description" content="Copyright http://blog.fens.me">
  7. <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  8. <link rel="stylesheet" href="styles/main.css">
  9. </head>
  10. <body ng-app="app">
  11. <div class="container">
  12. <h2 class="text-primary">
  13. <a href="http://blog.fens.me/angularjs-express3-bootstarp3/">快速搭建Web环境 Angularjs + Express3 + Bootstarp3</a>
  14. </h2>
  15. <p>http://blog.fens.me/angularjs-express3-bootstarp3</p>
  16. <div class="row">
  17. <div class=".col-lg-12">
  18. <div ng-view></div>
  19. </div>
  20. </div>
  21. </div>
  22. <script src="bower_components/angular/angular.min.js"></script>
  23. <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  24. <script src="bower_components/angular-route/angular-route.min.js"></script>
  25. <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  26. <script src="scripts/angular/app.js"></script>
  27. <script src="scripts/angular/controllers.js"></script>
  28. </body>
  29. </html>

修改welcome.html


  1. <hr/>
  2. <form class="form-inline" role="form">
  3. <div class="form-group">
  4. <label>Welcome</label>
  5. <input type="text" class="form-control" ng-model="username" placeholder="Enter email">
  6. </div>
  7. </form>
  8. <p> {{ username }}</p>

这样就用手动的方式的搭建了:Angularjs + Express3 + Bootstrap3的组合。

6. 完整的项目

项目代码已上传的github,项目地址:https://github.com/bsspirit/angular-basic

项目下载及安装


  1. git clone https://github.com/bsspirit/angular-basic
  2. npm install
  3. bower install

项目运行


  1. node app.js

当然,对于大型的Angular项目,我们可以选择用Yeoman的种子构建,请参考文章:AngularJS从构建项目开始

但有时Yeoman的项目,更新不够及时,比如bootstrap已到v3了,种子项目还是bootstrap的v2,而且v3不兼容v2。这时也许手动构建自己的项目,才是更好的选择。

转载请注明出处:
http://blog.fens.me/angularjs-express3-bootstrap3/

快速搭建Web环境 Angularjs + Express3 + Bootstrap3的更多相关文章

  1. 93.快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    转自:https://www.cnblogs.com/wawahaha/p/3946023.html 前言 Angularjs越用越顺手,不仅代码量比jQuery少很多,而且实现思路特别清晰,构建大型 ...

  2. 快速搭建Web服务器软件PHP+Apache+MySQL

    搭建网站或者博客,需要一个合适的 Web 服务器.除了如下能在购买的虚拟空间上进行操作外,我们也可以在自己的电脑上搞定,因为可以用来方便快捷地测试网站或者博客主题,无论是 Wordpress.Joom ...

  3. windows下如何快速搭建web.py开发框架

    在windows下如何快速搭建web.py开发框架 用Python进行web开发的话有很多框架供选择,比如最出名的Django,tornado等,除了这些框架之外,有一个轻量级的框架使用起来也是非常方 ...

  4. LVS+keepalived快速搭建测试环境

    #LVS+keepalived快速搭建测试环境 #LVS+keepalived快速搭建测试环境 #centos6 X64 # LVS 负载均衡模式:DR(直接路由) 192.168.18.31 mas ...

  5. 在windows下如何快速搭建web.py开发框架

    在windows下如何快速搭建web.py开发框架 用Python进行web开发的话有很多框架供选择,比如最出名的Django,tornado等,除了这些框架之外,有一个轻量级的框架使用起来也是非常方 ...

  6. 阿里云体验实验室 教你如何《快速搭建LNMP环境》

    ## 体验平台简介 面向开发者和中小企业打造的一站式.全云端的开发平台,打开浏览器就可以开发.调试.上线,所测即所得,并结合无服务器的模式,重新定义云原生时代的研发工作方法论.旨在降低开发者上手成本和 ...

  7. 烂泥:学习ubuntu之快速搭建LNMP环境

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 现在公司使用的都是ubuntu系统,这几天由于个别项目需要,需要搭建一个LNMP环境.为了快速搭建这个环境,我使用是apt-get方式进行安装.具体的操作 ...

  8. windows 7 下快速搭建php环境(windows7+IIS7+php+mysql)

    原文:windows 7 下快速搭建php环境(windows7+IIS7+php+mysql) 1).采用理由: 优点:最大化的桌面图形化操作系统,可维护性优秀.基于IIS v6.0/v7.0(20 ...

  9. spring boot / cloud (十八) 使用docker快速搭建本地环境

    spring boot / cloud (十八) 使用docker快速搭建本地环境 在平时的开发中工作中,环境的搭建其实一直都是一个很麻烦的事情 特别是现在,系统越来越复杂,所需要连接的一些中间件也越 ...

随机推荐

  1. 构建高效安全的Nginx Web服务器

    一 为什么选择Nginx搭建Web服务器 Apache和Nginx是目前使用最火的两种Web服务器,Apache出现比Nginx早.Apache HTTP Server(简称Apache)是世界使用排 ...

  2. C语言结构体和联合体

    1.单链表插入 #include <stdio.h> #include <stdlib.h> #define FALSE 0 #define TRUE 1 typedef st ...

  3. BootStrap2学习日记7---表格

    基本表 代码: <div class="container"> <h1 class="page-header">基本表</h1&g ...

  4. [改善Java代码]使用Throwable获得栈信息

    AOP(Aspect Oriented Programming面向切面编程)可以很轻松的控制一个方法调用哪些类,也能够控制哪些方法允许被调用,一般来说切面编程(比如AspectJ)只能控制到方法级别, ...

  5. MSP430常见问题之LCD 显示驱动类

    Q1:晶体一般都是接32768,然后使用液晶很正常.我打算将晶体接6M的替换32768,那么液晶还能正常显示吗A1:看你所用的LCM 模块时序极限是多少HZ,然后看6M情况下,MSP430去驱动LCM ...

  6. pre 随变化的样式

    <pre style="white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-sp ...

  7. HDOJ2004成绩转换

    成绩转换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  8. HDOJ2003求绝对值

    求绝对值 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. 转 Android中this、super的区别

    在Java中,this通常指当前对象,super则指父类的.当你想要引用当前对象的某种东西,比如当前对象的某个方法,或当前对象的某个成员,你便可以利用this来实现这个目 的,当然,this的另一个用 ...

  10. 有趣的hello word

    程序一 #define _________ } #define ________ putchar #define _______ main #define _(a) ________(a); #def ...