我是如何用MEAN栈来搭建一个简朴的App的
近来在进修MEAN栈开辟，但google来的教程又太疏散，有讲express的， restful接口的，angular-resource设想的，就是没有一整套mean下来的。而成熟的框架如meteor、meanio、meanjs又不太合适新手?。
末了经由本身的实践综合各个教程搭建了这个简朴的mean运用，完成了基础的CRUD操纵?。从后端nodejs到前端angularjs都只用到了个中最简朴最轻易的模块。假如你也对MEAN开辟有兴致却摸不着头脑，能够看看我是怎样衔接mean各个模块的?。
live demo
源代码堆栈
后端概览Mongoose Restful Mlab Express Nodejs
前端概览 Angularjs Angular-ui-router angular-resource Bootstrap
Mongodb + Express + Angularjs + Nodejs == MEAN
背景学问请点击
目次构造以下图
后端搭建
后端数据模子构建 model > movies.js
后端路由 routes > movies.js
数据库衔接及效劳器启动 app.js
前端搭建
restful Api设想 public > js > service.js
前端路由 public > js > app.js
数据显现模板 public > * .html
假如你想随着我写一遍,下载 Nodejs ☺并在项目中装置以下package.json
package.json以下，不保证其他版天性一般运转
"angular": "^1.5.9",
"angular-resource": "^1.5.9",
"angular-ui-router": "^0.3.2",
"body-parser": "^1.13.3",
"bootstrap": "^3.3.7",
"express": "^4.13.3",
"mongoose": "^4.0.1"构建后端Api
1.在model > movies.js 下我们先构建数据模子，我们的模子只包括title(影戏名字)，director(导演)，其他的不关心?。
关于数据模子mongoose.Schema更多设置
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var movieSchema = new Schema({
title: String,
director: String
});
module.exports = mongoose.model('Movie', movieSchema);2.在routes > movies.js 中设想路由Api, 用到express, 另有上一步中的数据模子Movie。
var Movie = require('../model/movie');
var express = require('express');
//导入模块，赋值给router
var router = express.Router();
//设想路由
router.route('/movies')
// 获得一切 movies
.get(function(req, res) {
Movie.find(function(err, movies){
if (err) {
res.send(err);
}
res.json(movies);
});
})
// 最先熟习的CRUD?
.post(function(req, res) {
// 竖立一个 movie
var movie = new Movie(req.body);
movie.save(function(err) {
if (err) {
res.send(err);
}
})
});
router.route('/movies/:id')
// 读取一个 movie
.get(function(req, res) {
Movie.findOne({_id: req.params.id}, function(err, movie) {
if (err) {
res.send(err);
}
res.json(movie);
});
})
// 修正一个 movie
.put(function(req, res) {
Movie.findOne({_id: req.params.id}, function(err, movie) {
if (err) {
res.send(err);
}
for(prop in req.body){
movie[prop] = req.body[prop];
}
movie.save(function(err) {
if (err) {
res.send(err);
}
});
});
})
.delete(function(req, res) {
// 删除一个 movie
Movie.remove({
_id: req.params.id
}, function(err, movie) {
if (err) {
res.send(err);
}
});
});
//末了导出路由
module.exports = router;3.在app.js下衔接数据库，竖立效劳器。数据库用mlab,毕竟免费500MB?
var express = require('express');
var bodyParser = require('body-parser');
var movies = require('./routes/movies');
var mongoose = require('mongoose');
var app = express();
app.use(express.static(__dirname + ''));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
//data api path
app.use(movies);
//这个是我的mlab数据库地点，个中mean是账号密码
var connectionString = 'mongodb://mean:mean@ds113668.mlab.com:13668/mean';
//衔接数据库
mongoose.connect(connectionString);
var conn = mongoose.connection;
//测试数据库衔接是不是一般
// conn.on('error', console.error.bind(console, 'connection error'))
// conn.once('open', function() {
// console.log('database ready');
// });
//启动效劳器在localhost:8000运转
app.set('port', process.env.PORT || 8000);
app.listen(app.get('port'), function() {
console.log('your app is running on port 8000');
})构建前端Api
1.在public > js > movies.js用$resource构建api
angular.module('App.service', [])
.factory('Movie', function($resource) {
var $url = '/movies/:id';
return $resource($url, {id: '@_id'}, {
//由于$resource没有update要领，我们要本身构建一个
update: {
method: 'PUT'
}
});
})
//window全局模态框，在删除数据时会用到
.service('popupService', function($window) {
this.showPopup = function(message) {
return $window.confirm(message);
}
});2.在public > js > app.js中开启前端路由，我们运用angular-ui-router这个模块
//主模块App,依靠有ui.router，ngResource和我们在上一步定义的App.service效劳
angular.module('App', ['ui.router', 'ngResource', 'App.service'])
//最先设置路由和熟习的CRUD?
.config(function ($stateProvider) {
$stateProvider.state('movies', {
url: '/movies',
templateUrl: 'public/movies.html',
controller: function( $scope, $state, popupService, $window, Movie) {
//获得一切 movies
$scope.movies = Movie.query();
$scope.deleteMovie = function(movie) {
if (popupService.showPopup('删除？')) {
//删除一个 movie
movie.$delete();
$window.location.href = '';
}
};
}
})
.state('newMovie', {
url: '/movies/new',
templateUrl: 'public/movie-add.html',
controller: function($scope, $state, $stateParams, Movie) {
$scope.movie = new Movie();
$scope.addMovie = function () {
//竖立一个 movie
$scope.movie.$save();
$state.go('movies');
}
}
})
.state('viewMovie', {
url: '/movies/:id/view',
templateUrl: 'public/movie-view.html',
controller: function($scope, $stateParams, Movie) {
//读取 一个movie
$scope.movie = Movie.get({id: $stateParams.id});
}
})
.state('editMovie', {
url: '/movies/:id/edit',
templateUrl: 'public/movie-edit.html',
controller: function($scope, $state, $stateParams, Movie) {
$scope.updateMovie = function() {
//更新一个 movie
$scope.movie.$update();
$state.go('movies')
};
$scope.loadMovie = function() {
$scope.movie = Movie.get({id: $stateParams.id});
};
$scope.loadMovie();
}
});
})
//默许路由
.run(function($state) {
$state.go('movies');
});
3.路由设想终了就能够写模板了，在index.html引入各种模块及样式表
//index.html 部份内容
<div class="container">
<div class="row top-buffer">
<div class="col-md-8 col-xs-offset-2">
//ui-view是ui-router的显现地区。我们上一步定义的state里的templateUrl都显现在这里
<div ui-view></div>
</div>
</div>
</div>在public下另有别的5个模板，_form.html重要担任CRUD中的C(movie-add.html)和U(movie-edit.html)。CU两个模板都援用_form.html
//这个是U模板 movie-edit.html
<form role="form" ng-submit="updateMovie()" class="form-horizontal">
<div ng-include="'public/_form.html'"></div>
</form>//这个是C模板 movie-add.html
<form role="form" ng-submit="addMovie()" class="form-horizontal">
<div ng-include="'public/_form.html'"></div>
</form>R模板(movie-view.html)用于展现单个movie数据
剩下的D操纵和movies列表共用一个模板movies.html
<a ui-sref="newMovie" class="btn-primary btn-lg nodecoration">Add New Movie</a>
<table class="table movietable">
<tr>
<td><h3>All Movies</h3></td>
<td></td>
</tr>
<tr ng-repeat="movie in movies">
<td>{{movie.title}}</td>
<td>
<a class="btn btn-primary" ui-sref="viewMovie({id:movie._id})">View</a>
<a class="btn btn-danger" ng-click="deleteMovie(movie)">Delete</a>
</td>
</tr>
</table>至此，这个App的一切构建事情已完成。MEAN中每个模块所包括的学问都异常巨大，这只是一个异常简朴的新手教程，我们体验了一把Javascript Stack，串连前端后端，设想简朴的Api，链接数据库，操纵数据，显现模板。
愿望这个教程对你进击Javascript Stack 有协助?
部份进修材料
MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS
Build a blog with the MEAN stack
Creating RESTful APIs with Express 4
Creating a CRUD App in Minutes with Angular’s $resource
