Mac OS 的Mean环境搭建+ngTable
一、MongoDB 安装
1. 安装brew
brew的官网：http://brew.sh/
安装方法： Mac中打开终端，输入命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2. 安装MongoDB
2.1 终端输入命令 brew install mongodb
2.2 安装目录为/usr/local/Cellar/mongodb/3.2.5，3.2.5为版本号，不同版本的此目录不同。
2.3 配置文件为/usr/local/etc/mongod.conf,默认数据文件目录为/data/db,不存在须自行创建（注意设置读写权限）或设置自己的目录，如
dbPath: /usr/local/var/mongodb, 添加此行到配置文件mongod.conf中
2.4 启动mongodb, 终端输入命令mongod --config /usr/local/etc/mongod.conf
2.5 开一新到终端输入客户端命令 mongo
可以看到类似 MongoDB shell version:3.2.5
Connecting to: test的消息，表明服务端已启动
用浏览器打开http://localhost:27017，看到
It looks like you are trying to access MongoDB over HTTP on the native driver port.
二、NodeJS 安装
1.下载目前稳定版6.9.5，https://nodejs.org/dist/v6.9.5/node-v6.9.5.pkg
2.双击安装，安装完成后，终端输入 node -v，可以看到版本号
3.安装Express，运行 npm install -g express-generator
三、创建 Express 项目
1. 找一目录，创建 NGTableTest项目，express NGTableTest --view=ejs
2. 安装依赖 cd NGTableTest; npm install;
3. 安装Nodemon,Nodemon会自动重启web服务当它检测到代码文件有改动时候，npm install nodemon -g (前面加sudo如遇到权限问题)
4. 安装读写MongoDB模块Monk, npm install monk --save
--save表示叫monk依赖写到文件package.json
5. 启动web服务，输入 nodemon, 访问 http://localhost:3000 可以看到 Welcome to Express
四、MongoDB工具RoboMongo
1.访问https://robomongo.org,下载mac用到0.9.0版本，robomongo-0.9.0-darwin-x86_64-0786489.dmg
2.工具左边导航栏，右键crate database创建数据库 testtable
3.点击展开testtable, 选中Collections，右键Create Collection… ，创建videos
4.右键videos，Insert Document插入数据
{
"title" : "Terminator Genisys",
"genre" : "SciFi",
"description" : "When John Connor, leader of the human resistance, sends Sgt. Kyle Reese back to 1984 to protect Sarah Connor and safeguard the future, an unexpected turn of events creates a fractured timeline."
}
双击videos,可发现多了一条记录，并且这记录多了一列自动生成的_id
5.重复4，分别插入下面两条记录
{
"title" : "The Lord of the Rings",
"genre" : "Fantasy",
"description" : "A meek hobbit of the Shire and eight companions set out on a journey to Mount Doom to destroy the One Ring and the dark lord Sauron."
}
{
"title" : "Apollo 13",
"genre" : "Drama",
"description" : "NASA must devise a strategy to return Apollo 13 to Earth safely after the spacecraft undergoes massive internal damage putting the lives of the three astronauts on board in jeopardy."
}
至此，数据准备完毕
五、访问数据
1.创建访问数据库路由
在routes目录下创建文件videos.js, 代码如下
var express = require('express');
var router = express.Router();
var monk = require('monk');
var db = monk('localhost:27017/testtable');
router.get('/', function(req, res) {
var collection = db.get('videos');
collection.find({}, function(err, videos){
if (err) throw err;
res.json(videos);
});
});
module.exports = router;
2.修改app.js
在var users = require('./routes/users');的下一行增加var videos = require('./routes/videos');
在app.use('/users', users);的下一行增加app.use('/videos', videos);
3. 启动web服务，访问http://localhost:3000/videos.可以看到json格式的三条记录
六、ngTable展示数据
1.ejs 使用html文件
修改app.js, 删除app.set('view engine', 'ejs'); 替换为
app.engine('html',require('ejs').renderFile);
app.set('view engine','html');
2.将views文件夹里到文件后缀从ejs改为html
3.在views下创建文件table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'/>
<link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css" />
</head>
<body>
<div ng-app="myApp" class="main_table">
<div ng-controller="testController as vm">
<table ng-table="vm.tableParams" class="table" show-filter="true">
<tr ng-repeat="video in $data">
<td title="'Title'" filter="{ title: 'text'}" sortable="'title'">
{{video.title}}</td>
<td title="'Gen'" filter="{ genre: 'text'}" sortable="'genre'">
{{video.genre}}</td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.js'></script>
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<script src="javascripts/test.js"></script>
</body>
</html>
a.引入AngularJS框架
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.js'></script>
b.引入css框架Bootstrap
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'/>
c.引入ngTable
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
4.创建文件test.js, 数据保存到tableParams对象
var app = angular.module('myApp',['ngTable','ngResource']);
app.controller('testController',['$scope','$resource','NgTableParams',
function($scope,$resource,NgTableParams){
var self = this;
var Videos = $resource('/videos');
Videos.query(function(videos){
self.tableParams = new NgTableParams({}, { dataset: videos});
});
}]);
5.修改app.js
在app.use('/videos', videos);的下一行增加app.use('/table',index);
6.修改index.js, 增加代码
router.get('/table',function(req,res){
res.render('table',{title:'Table Test'});
});
访问http://localhost/table, 可以看到三条数据
七、参考网址
1.http://ng-table.com/#/
2.https://blog.udemy.com/node-js-tutorial/