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;
		    });   //取数据
		});

怎么样，是不是很方便，以后只需要在后端添加新的数据定义和在前端绑定新的数据接口就可以啦。