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

怎么样，是否是很方便，之后只须要在后端添加新的数据定义和在前端绑定新的数据接口就能够啦。