Mongo, Express, Angular, Node-- MEAN Stack搭建

前言

做爲一個從後端轉全棧的碼農，我一直使用express,jade & bootstrap, jquery的組合。重複了幾回相同的工做後，看到網上開始流行MEAN Stack，因而也對其研究了一番。

MEAN Stack在我看來最大的意義是能夠節省不少繁瑣重複的數據操做代碼，按照正常方式，頁面上須要數據時，前端須要寫ajax調用代碼取數據，後端須要寫接口接受數據請求，而後向Mongo發送請求取數據，最後返回到前端。而在MEAN Stack的體系裏，這隻須要在前端經過相似ORM的方式就能夠直接存取數據了，能夠節省大量的精力。

我花了一些時間研究了下MEAN.io和MEAN.js，可是都以爲他們作的太繁瑣了，沒辦法，只能本身另起爐竈搭一個MEAN Stack了，又Google了下，發現很多介紹MEAN Stack搭建的文章教的都是本身在Express中寫restful接口而後操做數據，若是這些都須要本身寫代碼，我用MEAN Stack的意義何在？本着偷懶到底的精神，我找到了express-restify-mongoose。恩，這下手頭材料齊全了，咱們就來搭一個MEAN Stack。

環境準備：Mongo, Angular, Express

這個我就不教你們了，請你們本身搭建。注意就是咱們須要angular-resource.min.js，這是angular處理Restful綁定的功能。

Mongo, Express Restful接口搭建

首先安裝express-restify-mongoose

npm install express-restify-mongoose --save

而後新建一個router作Restful Service，假設咱們的數據類是Customer，須要一個name字段和一個可選的comment字段.

/* models.js */
var express = require('express');
var router = express.Router();
var mongoose = require("mongoose");
var resify = require("express-restify-mongoose")

mongoose.connect("mongodb://localhost/test");

resify.serve(router, mongoose.model('Customer', new mongoose.Schema(
    {
        name : {type : String, required : true},
        comment : {type : String}
    }
)))

module.exports = router;

而後把這個router註冊到express裏

/* in app.js */
var models = require("[models.js位置]");
...
app.use(models)

OK，如今運行server測試下: http://localhost:3000/api/v1/Customers，Restful接口已經有了～

Angular Restful接口綁定

我在layout.jade里加入了對angular庫文件的引用

/* in layout.jade */
        script(src="/javascripts/lib/angular.min.js")
        script(src="/javascripts/lib/angular-route.min.js")
        script(src="/javascripts/lib/angular-resource.min.js")

而後在app.js（這是加載在前端的angular用的app.js，不要跟後端express的app.js混淆了)裏綁定restful接口

//注意在app的依賴里加上ngResource
                var app = angular.module('**', ['ngResource']);
                  
                ...

        app.factory("Customer", function($resource){
            return $resource("/api/v1/Customers/:id");
        });

搞定，這樣咱們就能夠在Controller中簡單的存取數據了！

app.controller("CustomerListCtrl", function($scope, Customer){
            var customer = {
                name : "jerry",
                comment : "handsome"
            };
            Customer.save(customer);  //存數據
            Customer.query(function(customers){
                $scope.customers = customers;
            });   //取數據
        });

怎麼樣，是否是很方便，之後只須要在後端添加新的數據定義和在前端綁定新的數據接口就能夠啦。