溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
由于項目的原因，項目的前端架構要從單純的angularjs轉到nodejs+angular+express的架構，這樣的架構對大家來說可能比較眼熟，沒錯，就是大名鼎鼎的MEAN (mongodb,express,angularjs,node) framework。隨著nodejs技術的日益成熟(當然io.js也逐漸崛起，并且和node重歸于好)，和其關聯技術必將炙手可熱，順利成章地將全棧的概念更加普及。
國內node社區很是活躍，比如說前端亂燉(http://www.html-js.com/),nodejs中文社區(https://cnodejs.org/,github上可以下載到源碼),你當然也可以通過nodejs官方網站的企業登記頁查詢有哪些公司和項目在使用nodejs(https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node),包括我們熟知的公司有LinkedIn, Yahoo, Paypal, eBay, Walmart，Groupon 還有很多的中小型公司，國內的公司如雪球、淘寶、網易、百度等也都有很多項目運行在Node.js之上,并且很多項目都在向node遷移。node包和npm是捆綁在一起的，從npm包的數量就可以看到node的火熱程度，截止此刻已經達到150355，一個月的download量甚至能達到億的數量級。
回到項目中來，從純的angularjs項目遷移到MEAN,我以為是個不怎么復雜的任務，無非就是加入node的支持，Express框架的引入和頁面繼續沿用以前項目的結果就完事兒了，現在看來，真是很傻很天真，一個個問題并且沒有思路解決的時候就開始懷疑自己這么做的可行性。后來我考慮使用generator來生成MEAN工程(我使用的是meanjs，meanstack)，由于網絡原因也均作罷(根據錯誤信息提示可能是bower引起的，后面再研究下)，還是自己捯飭吧。
下面記錄下我捯飭的過程, 僅供參考。
第一部分，我們建立node環境。
首先，在某個目錄下建立一個package.json文件，鍵入如下內容：
{
"name": "starter-mean",
"main": "server.js",
"dependencies": {
"express" : "~4.5.1",
"mongoose" : "~3.8.0",
"body-parser" : "~1.4.2",
"method-override" : "~2.0.2"
}
} Express為4.5.1及其以上版本(Node的一個MVC框架，當然還有其他的mvc框架，如express-io,koa,Geddy,Total,Partial,Locomotive,Sails)，mongoose為3.8.0及其以上版本，body-parser 和method-override為Express的內置模塊。
接下來我們使用npm install 裝下node modules,安裝成功后，在package.json同級目錄下生成一個node_modules目錄，該目錄下是項目依賴的目錄，即在package.json的dependencies中定義的模塊。
這時候該工程還不能啟動，因為還沒有定義node的入口，就像java的main方法。接下來在package.json的同級目錄下定義一個server.js文件，即package.jso中的main字段，鍵入如下內容：
var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
// config files
var db = require('./config/db');
var port = process.env.PORT || 8080;
// get all data/stuff of the body (POST) parameters
// mongoose.connect(db.url); // connect to our mongoDB database
app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(bodyParser.urlencoded({ extended: true })); // parse application/x-www-form-urlencoded
app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
require('./app/routes')(app); // pass our application into our routes
app.listen(port);
console.log('Magic happens on port ' + port);
exports = module.exports = app; 如果想讓你的工程鏈接mongodb，可以建立一個config目錄，并建一個db.js,鍵入以下內容：
module.exports = {
url : 'mongodb://<user>:<pass>@mongo.onmodulus.net:27017/uw45mypu'
}我們在這里建一個數據模型，為支持操作mongodb，建立app/models/XXX.js, 可以鍵入如下內容，
// grab the mongoose module
var mongoose = require('mongoose');
// define our nerd model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('demo', {
name : {type : String, default: ''}
});我不打算在demo中支持mongodb，只是示例而已。不過多解釋。
我們還需要一個router，以便鏈接到我們的主頁面，在app文件夾下建立一個router.js，鍵入：
module.exports = function(app) {
// route to handle all angular requests
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
});
};node的基本結構就是這樣了，那么js文件，css文件，controller，server該怎么存放呢，Express要求建一個public文件夾用來存放這些文件。
為了保持同步，我們先看下現在的目錄結構：
第二部分：建立WEB部分
我們先建立一個index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Starter MEAN Single Page Application</title> </head> <body> Mean framework! </body> </html>
下面我們啟動下node服務，在server.js同級目錄下啟動命令行，執行
node server.js
在瀏覽器輸入http://localhost:8080,如果看到“Mean framework ”,證明你的基本服務是ok的。
我們的demo還需要做如下幾件事情：
(1)css文件和js文件需要加載到頁面
(2)angularjs結構(controller,service,directive)
(3)創建3個頁面
(4)使用ngRoute創建頁面路由
(5)使用bootstrap構建頁面
靜態文件管理
既然是新的架構，我們將采用新的管理文件工具bower。如果你還在用傳統的手工方法搜索、下載js/css文件，那你就out的不行了。首先，確保你的機器已經安裝bower，如果沒有安裝，可以通過如下命令安裝：
npm install -g bower
之后，我們需要另外兩個文件(.bowerrc和bower.json)文件才能讓bower為我們工作，在工程根目錄建立這兩個文件，在 .bowerrc文件中鍵入文件目錄，以后通過bower安裝的文件都可以在這個目錄下找到。
{
"directory": "public/libs"
}
在bower.json中，輸入中如下內容：
{
"name": "angular",
"version": "1.0.0",
"dependencies": {
"bootstrap": "latest",
"angular": "latest",
"angular-route": "latest"
}
}dependencies字段中指明我們需要的第三方庫，以后我們需要引入別的庫，只需要在該文件中配置即可，然后執行：
bower insall
下載依賴庫并把依賴庫賦值到相應的目錄下(注意：如果執行bower install報錯時，錯誤的信息為無法鏈接到github.com,可以在執行該命令前執行
git config --global url."https://".insteadOf git://
將git://協議替換為https協議)。
是不是發現public/lib目錄下多了些文件，現在你可以隨意使用了。
我們最后看下新的文件結構：
這里不在貼各個文件的代碼，有需要的請查看附件，但是由于附件大小的限制，不再提供node_modules,請自行執行npm install && bower insall .
最后附上效果圖：
如果有問題請聯系我。謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
