[MEAN Stack] First API -- 4. Organize app structure
The app structure:
Front-end: app.js
/**
* Created by Answer1215 on 12/9/2014.
*/
'use strict'; function MainCtrl(PeopleService) {
var vm = this;
vm.people = [];
vm.selectedPerson = {}; vm.getPeople = PeopleService.getPeople().then(function(response) {
vm.people = response.data;
}); vm.selectPerson = function(person) {
PeopleService.getSelectedPerson(person).then(function(response) {
vm.selectedPerson = response.data;
vm.selectedPerson.fullName = response.data.firstName + " " + response.data.lastName;
}); } } function PeopleService($http) { var PeopleService = {};
PeopleService.getPeople = function() {
return $http.get('http://localhost:3000/people');
} PeopleService.getSelectedPerson = function(person) {
return $http.get('http://localhost:3000/people/'+person._id);
} return PeopleService;
} angular.module('app',[
'ngResource'
])
.controller('MainCtrl', MainCtrl)
.service('PeopleService', PeopleService);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="app"> <div class="row" ng-controller="MainCtrl as vm">
<div class="col-xs-4">
<ul>
<li ng-repeat="person in vm.people" ng-click="vm.selectPerson(person)">{{person.firstName}}</li>
</ul>
</div>
<div class="col-xs-6">
<h2>{{vm.selectedPerson.fullName}}</h2>
<span>{{vm.selectedPerson.email}}</span>
</div>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Backend:
server.js
'use strict'; var express = require('express');
var cors = require("cors");
var app = express();
app.use(cors());
var people = require('./controller/people'); app.get('/people', people.getAll);
app.get('/people/:id', people.get); app.listen(3000);
controller/people.js
/**
* Created by Answer1215 on 12/26/2014.
*/
var model = require('../model/people'); exports.getAll = function(request, response){
model.getAll(function(err, data) {
if(err) response.json(503, {error: true}); response.json(200, data);
});
} exports.get = function(request, response){
var id = request.params.id;
model.get(id, function(err, data) {
if(err) response.json(503, {error: true}); response.json(200, data);
});
}
model/people.js
/**
* Created by Answer1215 on 12/26/2014.
*/
var mongoose = require('../lib/mogoose'); var personSchema = {
firstName:String,
lastName:String,
email:String
}; //create a person model, and rename db as people
var Person = mongoose.model('Person', personSchema); exports.getAll = function(callback) {
Person.find().select("firstName").exec(function(err, data) {
// response.json(200, data);
callback(err, data);
});
} exports.get = function(id, callback){
Person.findById(id, function(err, data) {
//response.send(data);
callback(err, data);
});
}
lib/mogoose.js
/**
* Created by Answer1215 on 12/26/2014.
*/
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/simple'); module.exports = mongoose;
[MEAN Stack] First API -- 4. Organize app structure的更多相关文章
- [MEAN Stack] First API -- 7. Using Route Files to Structure Server Side API
Currently, the server.js is going way too long. In the real world application, it is likely that we ...
- [MEAN Stack] First API -- 5. Using $resource to setup REST app
Front-end changes: app.js: Uinsg $resource /** * Created by Answer1215 on 12/9/2014. */ 'use strict' ...
- [MEAN Stack] First API -- 3. Select by ID with Mongoose and Express
Mongoose allows you to easily select resources by ID from your MongoDB. This is an important aspect ...
- [MEAN Stack] First API -- 1. with Node.js, Express and MongoDB
Learn how to import data into your MongoDB and then use Express to serve a simple Node.js API. Impor ...
- Spark2.3(四十):如何使用java通过yarn api调度spark app,并根据appId监控任务,关闭任务,获取任务日志
背景: 调研过OOZIE和AZKABA,这种都是只是使用spark-submit.sh来提交任务,任务提交上去之后获取不到ApplicationId,更无法跟踪spark application的任务 ...
- 淘宝用户api 如何获得App Key和API Secret
下面我们通过截图的方式详细说明申请淘宝应用的步骤. 一.访问淘宝开放平台http://open.taobao.com/ 申请成为合作伙伴 二.填写个人信息申请入住 三.点击创建应用 四.填写应用名称, ...
- Andorid API Package ---> android.app
包名: android.app Added in API level 1 URL:http://developer. ...
- 基于腾讯云监控 API 的 Grafana App 插件开发
Tencent Cloud Monitor App Grafana 是一个开源的时序性统计和监控平台,支持例如 elasticsearch.graphite.influxdb 等众多的数据源,并以功能 ...
- 使用私有api统计ios app运行时间及次数
利用<iphone SprintBoard部分私有API总结>中提到的私有API,可以做很多越狱以前实现不了的事情. 比如,利用一个后台运行的app,监控该iphone上所有app的运行次 ...
随机推荐
- [Everyday Mathematics]20150210
设正方体 $ABCD-A_1B_1C_1D_1$ 的棱长为 $1$, $E$ 为 $AB$ 的中点, $P$ 为体对角线 $BD_1$ 上一点, 当 $\angle CPE$ 最大时, 求三菱锥 $P ...
- Filezilla 多目录的访问设置
[转:http://hi.baidu.com/yangjie312/blog/item/125a8405423d896d03088171.html] 设置好主目录之后,点击“Add”按钮可以把其余的目 ...
- 2016计蒜之道复赛 百度地图的实时路况 floyd+cdq分治
链接:https://nanti.jisuanke.com/t/11217 奉上官方题解: 枚举 d(x , y , z) 中的 y,把 y 从这个图中删去,再求这时的全源最短路即可,使用 Floyd ...
- Hibernate逆向工程
MySQL Administrator 创建表 MyEclipse Database Explorer视图: 1. New 2 .Driver template: MySQL Connector ...
- Chrome多线程模型
为什么使用多线程? Chrome的多线程模型主要解决什么问题? 如何实现该问题的解决? 1. 解决问题 Chrome有很多线程,这是为了保持UI线程(主线程)的高响应度,防止被其他费时的操作阻碍从而影 ...
- Linux中MySQL5.5解压版普通用户安装
#查看本机mysql 安装路径 [hadoop@SY-0134 toolkit]$ rpm -qa|grep -i mysql [hadoop@SY-0134 toolkit]$ whereis my ...
- SSHFS
SSHFS(SSH文件系统) 是一个文件系统客户端程序,使用它可以将远程服务器上的目录挂载在本地直接访问 可以在网站http://igikorn.com/sshfs-windows-8/内下载
- fedora 安装python mysql
如果你服务器环境允许yum,安装MySQL-python模块就很简单了. 如果直接安装不行,先 安装MySQL-devel后正常运行 yum install mysql-devel yum insta ...
- HDU-4734 F(x) 数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4734 注意到F(x)的值比较小,所以可以先预处理所有F(x)的组合个数.f[i][j]表示 i 位数时 ...
- 第二百五十六天 how can I 坚持
今天比较闲,但是好累. 每天都会学到很多东西. 比如说,在没搞懂别人说这话之前,最好不要先表达自己的想法. 不宜妄自菲薄.不以物喜,不以己悲.hadoop. 睡觉.召生好速度啊,这么快就把我照片发给同 ...