全國服務熱線:4000056135 24小時咨詢:18530000893

鄭州做網站|鄭州網站建設

網站建設 企業經濟型 企業標準型 企業品牌型 企業營銷型 定制型 建站流程

使用Angular JS + Express JS入門搭建網站

來源:河南天億慧網絡   發布時間:2015-05-19 09:34

最近,接到了新的任務,跟UI開發有關,用的是Angular JS,Express JS等技術。于是周末順便學習下新技術。

組里產品UI架構如下:

AngularJS框架 ExpressJS框架 網站搭建 Bootstrap學習

其中前端,主要使用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的原理可通過下圖了解:

AngularJS框架 ExpressJS框架 網站搭建 Bootstrap學習

網上入門學習的資料也很多,這里不予贅述。但介紹一下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項目。

路徑如下:

AngularJS框架 ExpressJS框架 網站搭建 Bootstrap學習

其中public文件夾中放置的是UI相關文件,如下:

AngularJS框架 ExpressJS框架 網站搭建 Bootstrap學習

其中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文件中定義,這兩句順序不能錯。

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控制器替換為正確數據。

AngularJS框架 ExpressJS框架 網站搭建 Bootstrap學習

這里講一個小地方,最初試驗時頁面的變量怎么也不替換,花了很多個小時,換了Angular JS庫,改變了控制器等寫法,都沒用。最后查資料和文檔,才發現只有頁面中有ng-view,才會起作用。原來是這樣。。。

最新案例
網站建設知識
  1. 如何建設一個高端大氣的網站
  2. 醫院網站建設必須考慮的問題介紹
  3. 網站建設要利用后期SEO工作進行
  4. 網站建設內容建設才是最重要的
  5. 網站建設的基本步驟是什么
  6. 網站建設好后內容怎么更新軟文怎
常見問題解答
  1. 2015年5月百度算法做了那些調整
  2. 使用Angular JS + Express JS入
  3. 網站如何邁向巔峰?四個角度三個
  4. 幾種最常見的網站盈利模式分析
  5. 網站設計對于網站運營的影響分析
  6. 漲姿勢!你知道這些編程語言的創
云南时时彩开奖视频