Angular JS + Express JS入門搭建網站

時間 2019-11-12

標籤 angular express 入門搭建網站欄目 AngularJS 简体版

原文原文鏈接

　　3月份開始，接到了新的任務，跟UI開發有關，用的是Angular JS，Express JS等技術。因而週末順便學習下新技術。html

　　組裏產品UI架構以下：前端

　　其中前端，主要使用Angular JS框架，另外配合Bootstrap提供的不少控件以及JQuery，後臺主要是Express JS搭建的Web Server，Express JS配合Nginx使用很是方便。node

　　由此在項目不忙的時候，本身因而有時間和興趣學習一下Angular JS與Express JS。angularjs

　　同時本身實現了一個最簡單的Angular JS + Express JS的網站示例。express

一. Angular JSnpm

　　Angular JS是由谷歌員工開發，後由谷歌維護的一個項目，官網爲：https://angularjs.org/。上面有詳細的文檔，能夠下載最新的版本1.4和穩定版1.3.15。緩存

　　簡單來說，Angular JS是一個做用在前端的Javascript框架。它的兩大特色是經過指令擴展了Html，而且經過表達式綁定數據到Html。同時提供了控制器，Filter過濾器，Factory等服務。服務器

　　Angular JS由於做用在前端，因此能夠和任何服務器技術相結合，與Express JS就是很好的結合。cookie

　　Angular JS的產生爲了解決靜態網頁操做DOM的弊端，適用於開發動態Web應用。session

　　Angular JS的原理可經過下圖瞭解：

　　網上入門學習的資料也不少，這裏不予贅述。但介紹一下Angular JS的幾個重要概念：

　　1. 控制器Controller

　　　　要動態操做網頁中的數據，咱們能夠針對Html頁面編寫控制器，控制器本質是一個Javascript方法，例如咱們能夠針對每個HTML頁面，寫一個對應的Javascript方法作控制器，來控制頁面中的數據。以下：

　　　　index.html

 1 <!doctype html>
 2 <html ng-app="myApp">
 3     <head>
 4         <script src="lib/angular-1.3.15/angular.js"></script>
 5         <script src="lib/angular-1.3.15/angular-route.js"></script>
 6         <script src="js/controller.js"></script>
 7         <script src="js/angularMainApp.js"></script>
 8     </head>
 9     <body ng-view>
10         <div>
11             <p>Hello {{name}}</p>
12         </div>
13     </body>
14 </html>

　　　　這是一個Angular JS控制編寫的頁面，指定Angular JS的app爲myApp，注意看其中的表達式，{{name}}，name就是一個動態變量。那name的值從何而來？就是要在對應的控制器中給name賦值，歷來用戶訪問index.html頁面時可看到name真實的值。

　　　　controller.js

1 // Declare angular JS level module wich depends on filters, and services
2 var myControllers = angular.module('myControllers', []);
3 
4 // controller
5 myControllers.controller('indexContrl', ['$scope', function ($scope) {
6     $scope.name = "Kevin";
7 }]);

　　　　在controller.js中，咱們定義了一個indexContrl的控制器，這個控制器來給index.html中的name賦值。固然我以爲真實開發中，控制器的代碼確定會不少，建議每個像indexContrl的控制器單獨放在一個JS文件中，這樣規範，好維護。

　　　　那有一個問題，indexContrl如何與index.html關聯起來？Angular JS怎麼知道咱們要用indexContrl來控制index.html？

　　　　這裏有兩種方式，一是在index.html中直接指定，

1         <div ng-controller="indexContrl">
2             <p>Hello {{name}}</p>
3         </div>

　　　　但這種方式，對於大型網站來講，太麻煩。建議使用另一種方式，就是用Angular JS的另外一個Module ng-route，作路由控制，針對不一樣的路徑，在同一個文件中定義好各自的控制器。以下：

　　　　myAngularApp.js

 1 // Declare angular JS level module wich depends on filters, and services
 2 var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);
 3 
 4 // route
 5 myApp.config(['$routeProvider',
 6     function($routeProvider) {
 7         $routeProvider.
 8         when(
 9                 '/',
10                 {
11                     templateUrl: 'index.html',
12                     controller: 'indexContrl'
13                 }
14         ).
15         otherwise( {
16             redirectTo: '/404'
17         });
18     }
19 ]);

　　　　值得注意的是，必定要在myApp的moudle中引用ng-route，同時要在文件中引用angular-route.js文件，不然不起做用。

　　　　這樣index.html頁面中的數據，會被indexContrl函數控制。這裏只是一個簡單的Demo，更多的功能要去看文檔。

　　2. Filter過濾器

　　　　Angular JS提供過濾器功能，本質是咱們定義一些通用的方法，來格式化頁面上輸出的數據。很是方便。

　　　　建議開發時放在單獨的Filter.js文件中。

　　3. Factory服務

　　　　也是讓咱們定義一些通用的方法，做爲服務。但全部的服務都是延遲實例化，只要用到時或被依賴時纔會實例化，都是單例。

　　　　建議開發時放在單獨的Factory.js文件中。

二. Express JS

　　在示例的前端中，咱們使用Angular JS框架開發了Html頁面以及對應的JS文件。但網站的後臺就要用其餘技術了。若是咱們要用Node.js作後臺，那很簡單，http.createServer就能夠了。但在真實的網站開發中，用Express JS會更適合。

　　Express JS是目前最流行的基於Node.js的Web開發框架，提供各類模塊，如session，cookie等，可快速搭建一個具備完整功能的網站。

　　本質來說，Express JS是基於Node.js內置的http模塊開發而成。

　　Express JS和Nginx反向代理服務器搭配很是方便，反向代理有能夠高效提供靜態資源（緩存）等功能。

　　這裏Express JS有一個重要概念是中間件middleware，能夠加載使用不少Express JS或其餘模塊提供的模塊做爲中間件，它的做用是處理http請求，一箇中間件處理完，能夠傳遞給下一個中間件。

　　可以使用NPM來下載Express JS。

1 npm install express

　　若是要快速使用Express JS來搭建網站後臺，推薦一個工具，叫express-generator，它能夠幫你快速建一個Express JS項目，生成必要的文件。

1 npm install -g express-generator

　　但這裏，我發現express generator中使用的其餘模塊較多，如jade作視圖渲染等，稍顯複雜。我仍是參照，本身創建一個最簡單的Express JS項目。

　　路徑以下：

　　其中public文件夾中放置的是UI相關文件，以下：

　　其中app.js是Express JS的起始文件，至關於main函數。

　　app.js

 1 var express = require('express');
 2 var http    = require('http');
 3 var path    = require('path');
 4 var routes  = require('./routes/index');
 5 
 6 var app = express();
 7 
 8 app.use(express.static(path.join(__dirname, 'public')));
 9 
10 app.use('/', routes);
11 
12 http.createServer(app).listen(3000);

　　這裏，就是使用Express JS創建一個server，注意第8行代碼的做用是指定頁面的文件夾，第10句的做用是關於路徑/的路由信息在routes文件夾裏的index文件中定義，這兩句順序不能錯。

　　routes/index

1 var express = require('express');
2 var router = express.Router();
3 
4 /* GET home page. */
5 router.get('/', function(req, res, next) {
6   res.render('index', { title: 'Express' });
7 });
8 
9 module.exports = router;