溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何使用Angular JS + Express JS入門搭建網站，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
月份開始，接到了新的任務，跟UI開發有關，用的是Angular JS，Express JS等技術。于是周末順便學習下新技術。
組里產品UI架構如下：
其中前端，主要使用Angular JS框架，另外配合Bootstrap提供的很多控件以及JQuery，后臺主要是Express JS搭建的Web Server，Express JS配合Nginx使用非常方便。
由此在項目不忙的時候，自己于是有時間和興趣學習一下Angular JS與Express JS。
同時自己實現了一個最簡單的Angular JS + Express JS的網站示例。
一. Angular JS
Angular JS是由谷歌員工開發，后由谷歌維護的一個項目，官網為：https://angularjs.org/。上面有詳細的文檔，可以下載***的版本1.4和穩定版1.3.15。
簡單來講，Angular JS是一個作用在前端的Javascript框架。它的兩大特點是通過指令擴展了Html，并且通過表達式綁定數據到Html。同時提供了控制器，Filter過濾器，Factory等服務。
Angular JS因為作用在前端，所以可以和任何服務器技術相結合，與Express JS就是很好的結合。
Angular JS的產生為了解決靜態網頁操作DOM的弊端，適用于開發動態Web應用。
Angular JS的原理可通過下圖了解：
網上入門學習的資料也很多，這里不予贅述。但介紹一下Angular JS的幾個重要概念：
1. 控制器Controller
要動態操作網頁中的數據，我們可以針對Html頁面編寫控制器，控制器本質是一個Javascript方法，例如我們可以針對每一個HTML頁面，寫一個對應的Javascript方法做控制器，來控制頁面中的數據。如下：
index.html
<!doctype html> <html ng-app="myApp"> <head> <script src="lib/angular-1.3.15/angular.js"></script> <script src="lib/angular-1.3.15/angular-route.js"></script> <script src="js/controller.js"></script> <script src="js/angularMainApp.js"></script> </head> <body ng-view> <div> <p>Hello {{name}}</p> </div> </body> </html>這是一個Angular JS控制編寫的頁面，指定Angular JS的app為myApp，注意看其中的表達式，{{name}}，name就是一個動態變量。那name的值從何而來？就是要在對應的控制器中給name賦值，從來用戶訪問index.html頁面時可看到name真實的值。
controller.js
// Declare angular JS level module wich depends on filters, and services var myControllers = angular.module('myControllers', []); // controller myControllers.controller('indexContrl', ['$scope', function ($scope) { $scope.name = "Kevin"; }]);在controller.js中，我們定義了一個indexContrl的控制器，這個控制器來給index.html中的name賦值。當然我覺得真實開發中，控制器的代碼肯定會很多，建議每一個像indexContrl的控制器單獨放在一個JS文件中，這樣規范，好維護。
那有一個問題，indexContrl如何與index.html關聯起來？Angular JS怎么知道我們要用indexContrl來控制index.html？
這里有兩種方式，一是在index.html中直接指定，
<div ng-controller="indexContrl">
<p>Hello {{name}}</p>
</div>
但這種方式，對于大型網站來說，太麻煩。建議使用另外一種方式，就是用Angular JS的另一個Module ng-route，做路由控制，針對不同的路徑，在同一個文件中定義好各自的控制器。如下：
myAngularApp.js
// Declare angular JS level module wich depends on filters, and services var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']); // route myApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when( '/', { templateUrl: 'index.html', controller: 'indexContrl' } ). otherwise( { redirectTo: '/404' }); } ]);值得注意的是，一定要在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。
npm install express
如果要快速使用Express JS來搭建網站后臺，推薦一個工具，叫express-generator，它可以幫你快速建一個Express JS項目，生成必要的文件。
npm install -g express-generator
但這里，我發現express generator中使用的其他模塊較多，如jade做視圖渲染等，稍顯復雜。我還是參照，自己建立一個最簡單的Express JS項目。
路徑如下：
其中public文件夾中放置的是UI相關文件，如下：
其中app.js是Express JS的起始文件，相當于main函數。
app.js
var express = require('express'); var http = require('http'); var path = require('path'); var routes = require('./routes/index'); var app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); http.createServer(app).listen(3000);這里，就是使用Express JS建立一個server，注意第8行代碼的作用是指定頁面的文件夾，第10句的作用是關于路徑/的路由信息在routes文件夾里的index文件中定義，這兩句順序不能錯。
routes/index
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;意為對于路徑/的訪問，去public文件夾下找index.html文件。
這樣通過一條命令，
node app.js
就可以把網站掛起來。
三. 示例結果及小結
***訪問網站，可看到正確的結果，網站已被掛起，同時頁面中的變量已被Angular JS控制器替換為正確數據。
這里講一個小地方，最初試驗時頁面的變量怎么也不替換，花了很多個小時，換了Angular JS庫，改變了控制器等寫法，都沒用。***查資料和文檔，才發現只有頁面中有ng-view，才會起作用。
上述就是小編為大家分享的如何使用Angular JS + Express JS入門搭建網站了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
