如何使用AngularJS+ExpressJS入門搭建網(wǎng)站

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何使用Angular JS + Express JS入門搭建網(wǎng)站，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)海南,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

月份開始，接到了新的任務(wù)，跟UI開發(fā)有關(guān)，用的是Angular JS，Express JS等技術(shù)。于是周末順便學(xué)習(xí)下新技術(shù)。

組里產(chǎn)品UI架構(gòu)如下：

如何使用Angular JS + Express JS入門搭建網(wǎng)站

其中前端，主要使用Angular JS框架，另外配合Bootstrap提供的很多控件以及JQuery，后臺(tái)主要是Express JS搭建的Web Server，Express JS配合Nginx使用非常方便。

由此在項(xiàng)目不忙的時(shí)候，自己于是有時(shí)間和興趣學(xué)習(xí)一下Angular JS與Express JS。

同時(shí)自己實(shí)現(xiàn)了一個(gè)最簡(jiǎn)單的Angular JS + Express JS的網(wǎng)站示例。

 一. Angular JS

Angular JS是由谷歌員工開發(fā)，后由谷歌維護(hù)的一個(gè)項(xiàng)目，官網(wǎng)為：https://angularjs.org/。上面有詳細(xì)的文檔，可以下載***的版本1.4和穩(wěn)定版1.3.15。

簡(jiǎn)單來(lái)講，Angular JS是一個(gè)作用在前端的Javascript框架。它的兩大特點(diǎn)是通過(guò)指令擴(kuò)展了Html，并且通過(guò)表達(dá)式綁定數(shù)據(jù)到Html。同時(shí)提供了控制器，F(xiàn)ilter過(guò)濾器，F(xiàn)actory等服務(wù)。

Angular JS因?yàn)樽饔迷谇岸耍钥梢院腿魏?a title="服務(wù)器" target="_blank" >服務(wù)器技術(shù)相結(jié)合，與Express JS就是很好的結(jié)合。

Angular JS的產(chǎn)生為了解決靜態(tài)網(wǎng)頁(yè)操作DOM的弊端，適用于開發(fā)動(dòng)態(tài)Web應(yīng)用。

Angular JS的原理可通過(guò)下圖了解：

如何使用Angular JS + Express JS入門搭建網(wǎng)站

網(wǎng)上入門學(xué)習(xí)的資料也很多，這里不予贅述。但介紹一下Angular JS的幾個(gè)重要概念：

1. 控制器Controller

要?jiǎng)討B(tài)操作網(wǎng)頁(yè)中的數(shù)據(jù)，我們可以針對(duì)Html頁(yè)面編寫控制器，控制器本質(zhì)是一個(gè)Javascript方法，例如我們可以針對(duì)每一個(gè)HTML頁(yè)面，寫一個(gè)對(duì)應(yīng)的Javascript方法做控制器，來(lái)控制頁(yè)面中的數(shù)據(jù)。如下：

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>

這是一個(gè)Angular JS控制編寫的頁(yè)面，指定Angular JS的app為myApp，注意看其中的表達(dá)式，{{name}}，name就是一個(gè)動(dòng)態(tài)變量。那name的值從何而來(lái)？就是要在對(duì)應(yīng)的控制器中給name賦值，從來(lái)用戶訪問index.html頁(yè)面時(shí)可看到name真實(shí)的值。

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中，我們定義了一個(gè)indexContrl的控制器，這個(gè)控制器來(lái)給index.html中的name賦值。當(dāng)然我覺得真實(shí)開發(fā)中，控制器的代碼肯定會(huì)很多，建議每一個(gè)像indexContrl的控制器單獨(dú)放在一個(gè)JS文件中，這樣規(guī)范，好維護(hù)。

那有一個(gè)問題，indexContrl如何與index.html關(guān)聯(lián)起來(lái)？Angular JS怎么知道我們要用indexContrl來(lái)控制index.html？

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

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

但這種方式，對(duì)于大型網(wǎng)站來(lái)說(shuō)，太麻煩。建議使用另外一種方式，就是用Angular JS的另一個(gè)Module ng-route，做路由控制，針對(duì)不同的路徑，在同一個(gè)文件中定義好各自的控制器。如下：

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，同時(shí)要在文件中引用angular-route.js文件，否則不起作用。

這樣index.html頁(yè)面中的數(shù)據(jù)，會(huì)被indexContrl函數(shù)控制。這里只是一個(gè)簡(jiǎn)單的Demo，更多的功能要去看文檔。

2. Filter過(guò)濾器

Angular JS提供過(guò)濾器功能，本質(zhì)是我們定義一些通用的方法，來(lái)格式化頁(yè)面上輸出的數(shù)據(jù)。非常方便。

建議開發(fā)時(shí)放在單獨(dú)的Filter.js文件中。

3. Factory服務(wù)

也是讓我們定義一些通用的方法，作為服務(wù)。但所有的服務(wù)都是延遲實(shí)例化，只要用到時(shí)或被依賴時(shí)才會(huì)實(shí)例化，都是單例。

建議開發(fā)時(shí)放在單獨(dú)的Factory.js文件中。

二. Express JS

在示例的前端中，我們使用Angular JS框架開發(fā)了Html頁(yè)面以及對(duì)應(yīng)的JS文件。但網(wǎng)站的后臺(tái)就要用其他技術(shù)了。如果我們要用Node.js做后臺(tái)，那很簡(jiǎn)單，http.createServer就可以了。但在真實(shí)的網(wǎng)站開發(fā)中，用Express JS會(huì)更適合。

Express JS是目前***的基于Node.js的Web開發(fā)框架，提供各種模塊，如session，cookie等，可快速搭建一個(gè)具有完整功能的網(wǎng)站。

本質(zhì)來(lái)講，Express JS是基于Node.js內(nèi)置的http模塊開發(fā)而成。

Express JS和Nginx反向代理服務(wù)器搭配非常方便。

這里Express JS有一個(gè)重要概念是中間件middleware，可以加載使用很多Express JS或其他模塊提供的模塊作為中間件，它的作用是處理http請(qǐng)求，一個(gè)中間件處理完，可以傳遞給下一個(gè)中間件。

可使用NPM來(lái)下載Express JS。

npm install express

如果要快速使用Express JS來(lái)搭建網(wǎng)站后臺(tái)，推薦一個(gè)工具，叫express-generator，它可以幫你快速建一個(gè)Express JS項(xiàng)目，生成必要的文件。

npm install -g express-generator

但這里，我發(fā)現(xiàn)express generator中使用的其他模塊較多，如jade做視圖渲染等，稍顯復(fù)雜。我還是參照，自己建立一個(gè)最簡(jiǎn)單的Express JS項(xiàng)目。

路徑如下：

如何使用Angular JS + Express JS入門搭建網(wǎng)站

其中public文件夾中放置的是UI相關(guān)文件，如下：

如何使用Angular JS + Express JS入門搭建網(wǎng)站

其中app.js是Express JS的起始文件，相當(dāng)于main函數(shù)。

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建立一個(gè)server，注意第8行代碼的作用是指定頁(yè)面的文件夾，第10句的作用是關(guān)于路徑/的路由信息在routes文件夾里的index文件中定義，這兩句順序不能錯(cuò)。

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;

意為對(duì)于路徑/的訪問，去public文件夾下找index.html文件。

這樣通過(guò)一條命令，

node app.js

就可以把網(wǎng)站掛起來(lái)。

三. 示例結(jié)果及小結(jié)

***訪問網(wǎng)站，可看到正確的結(jié)果，網(wǎng)站已被掛起，同時(shí)頁(yè)面中的變量已被Angular JS控制器替換為正確數(shù)據(jù)。

如何使用Angular JS + Express JS入門搭建網(wǎng)站

這里講一個(gè)小地方，最初試驗(yàn)時(shí)頁(yè)面的變量怎么也不替換，花了很多個(gè)小時(shí)，換了Angular JS庫(kù)，改變了控制器等寫法，都沒用。***查資料和文檔，才發(fā)現(xiàn)只有頁(yè)面中有ng-view，才會(huì)起作用。

上述就是小編為大家分享的如何使用Angular JS + Express JS入門搭建網(wǎng)站了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：如何使用AngularJS+ExpressJS入門搭建網(wǎng)站
文章起源：http://bm7419.com/article20/jcshco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、微信小程序、虛擬主機(jī)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作