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

時間 2019-11-13

標籤快速搭建 web 環境 angularjs express3 express bootstrap3 bootstrap 欄目 HTML 简体版

原文原文鏈接

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

AngularJS體驗式編程系列文章，將介紹如何用angularjs構建一個強大的web前端系統。angularjs是由Google團隊開發的一款很是優秀web前端框架。在當前如此多的web框架下，angularjs能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新地把後臺技術融入前端開發，掃去jQuery一度的光芒。用angularjs就像寫後臺代碼，更規範，更結構化，更可控。javascript

關於做者css

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

轉載請註明出處：
http://blog.fens.me/angularjs-express3-bootstrap3/html

前言前端

Angularjs越用越順手，不只代碼量比jQuery少不少，並且實現思路特別清晰，構建大型的Web前端項目，真是最適合不過了。html5

Bootstrap讓界面美觀大方，就連像我這種不懂UE的人，也能作出專業級的水準。再結合Nodejs的Express作後端，三劍合併，太無敵了，大有統一前端開發的趨勢，前途不可估量！java

目錄node

從零開始手工建立Express3項目
新建Angularjs目錄及文件
配置bower
配置Angularjs項目
增長Bootstrap
完整的項目

1. 從零開始手工建立Express3項目

系統環境：git

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

本文截圖中使用的開發工具是WebStorm，請參考文章：AngularJS最理想開發工具WebStorm程序員

建立express項目angularjs

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

生成的express項目目錄

修改app.js的配置

修改ejs: 文件擴展名ejs爲html
設置angular: 啓動路徑爲」/」
設置angular: 啓動文件爲app/index.html

~ vi app.js

var express = require('express')
    , path = require('path')
    , ejs = require('ejs')
    , app = express()
    , server = require('http').createServer(app);

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html'); //替換文件擴展名ejs爲html
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'app')));

if (app.get('env') === 'development') {
    app.use(express.errorHandler());
}

// angular啓動頁
app.get('/', function (req, res) {
    res.sendfile('app/index.html');
});

server.listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
});

如何單首創建Express3的項目，請參考文章：Nodejs開發框架Express3.0開發手記–從零開始

2. 新建Angularjs目錄及文件

建立Angularjs須要的目錄及文件

D:\workspace\javascript\angular-basic>mkdir app
D:\workspace\javascript\angular-basic>mkdir app\scripts
D:\workspace\javascript\angular-basic>mkdir app\scripts\angular
D:\workspace\javascript\angular-basic>mkdir app\styles
D:\workspace\javascript\angular-basic>mkdir app\views
D:\workspace\javascript\angular-basic>mkdir app\views\component
D:\workspace\javascript\angular-basic>mkdir app\views\tpl

D:\workspace\javascript\angular-basic>touch app\index.html
D:\workspace\javascript\angular-basic>touch app\scripts\angular\app.js
D:\workspace\javascript\angular-basic>touch app\scripts\angular\controllers.js
D:\workspace\javascript\angular-basic>touch app\styles\main.css
D:\workspace\javascript\angular-basic>touch app\views\tpl\welcome.html

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: 歡迎頁

刪除不須要的文件目錄

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

啓動node服務器，檢查入口頁的配置

D:\workspace\javascript\angular-basic>node app.js
Express server listening on port 3000
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

~ vi .bowerrc

{
    "directory": "app/bower_components"
}

新建文件: bower.json

~ vi bower.json

{
    "name": "angular-basic",
    "version": "0.0.1",
    "dependencies": {
        "angular": "~1.2.12-build.2226",
        "angular-route": "~1.2.12-build.2226"
    },
    "devDependencies": {
    }
}

運行bower，下載Angular依賴庫

D:\workspace\javascript\angular-basic>bower install
bower angular-route#~1.2.12-build.2226           cached git://github.com/angular/bower-angular-route.git#1.2.13-build.2242
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
bower angular#~1.2.12-build.2226                 cached git://github.com/angular/bower-angular.git#1.2.13-build.2242
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
bower angular#1.2.13-build.2242+sha.e645f7c      cached git://github.com/angular/bower-angular.git#1.2.13-build.2242
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
bower angular-route#~1.2.12-build.2226          install angular-route#1.2.13-build.2242
bower angular#~1.2.12-build.2226                install angular#1.2.13-build.2242

angular-route#1.2.13-build.2242 app\bower_components\angular-route
└── angular#1.2.13-build.2242

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Angular-basic</title>
<meta name="description" content="Copyright http://blog.fens.me">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="app">

<ul>
<li><a href="http://blog.fens.me/angularjs-express3-bootstrap3/">快速搭建Web環境 Angularjs + Express3 + Bootstrap3</a></li>
<li>http://blog.fens.me/angularjs-express3-bootstrap3</li>
</ul>

<div ng-view></div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/angular/app.js"></script>
<script src="scripts/angular/controllers.js"></script>

</body>
</html>

修改welcome.html

Welcome {{ username }}

修改app.js

'use strict';

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {templateUrl: '/views/tpl/welcome.html', controller: 'WelcomeCtrl'})
        .otherwise({redirectTo: '/'});
    $locationProvider.html5Mode(true);
}]);

修改controller.js

'use strict';

function WelcomeCtrl($scope){
    $scope.username = 'Conan_Z';
}

從新啓動node，查看Angular項目。

D:\workspace\javascript\angular-basic>node app.js
Express server listening on port 3000
GET / 304 8ms
GET /styles/main.css 304 3ms
GET /scripts/angular/app.js 304 6ms
GET /scripts/angular/controllers.js 304 11ms
GET /bower_components/angular-route/angular-route.min.js 200 18ms - 3.82kb
GET /bower_components/angular/angular.min.js 200 19ms - 98.03kb
GET /views/tpl/welcome.html 304 9ms
GET /bower_components/angular-route/angular-route.min.js.map 200 21ms - 9.61kb
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文件

D:\workspace\javascript\angular-basic>bower install bootstrap --save
D:\workspace\javascript\angular-basic>bower install angular-bootstrap --save

修改index.html: 增長css, js的引用
修改welcome.html: 增長bootstrap的效果

修改index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Angular-basic</title>
<meta name="description" content="Copyright http://blog.fens.me">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="app">

<div class="container">
<h2 class="text-primary">
<a href="http://blog.fens.me/angularjs-express3-bootstarp3/">快速搭建Web環境 Angularjs + Express3 + Bootstarp3</a>
</h2>
<p>http://blog.fens.me/angularjs-express3-bootstarp3</p>

<div class="row">
<div class=".col-lg-12">
<div ng-view></div>
</div>
</div>
</div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/angular/app.js"></script>
<script src="scripts/angular/controllers.js"></script>

</body>
</html>

修改welcome.html

<hr/>
<form class="form-inline" role="form">
<div class="form-group">
<label>Welcome</label>
<input type="text" class="form-control" ng-model="username" placeholder="Enter email">
</div>
</form>
<p> {{ username }}</p>

這樣就用手動的方式的搭建了：Angularjs + Express3 + Bootstrap3的組合。

6. 完整的項目

項目代碼已上傳的github，項目地址： https://github.com/bsspirit/angular-basic

項目下載及安裝

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

項目運行

node app.js

固然，對於大型的Angular項目，咱們能夠選擇用Yeoman的種子構建，請參考文章：AngularJS從構建項目開始

但有時Yeoman的項目，更新不夠及時，好比bootstrap已到v3了，種子項目仍是bootstrap的v2，並且v3不兼容v2。這時也許手動構建本身的項目，纔是更好的選擇。

轉載請註明出處：
http://blog.fens.me/angularjs-express3-bootstrap3/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。