[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的运行次 ...
随机推荐
- hdu 2155 小黑的镇魂曲(dp) 2008信息工程学院集训队——选拔赛
感觉蛮坑的一道题. 题意很像一个叫“是男人下100层”的游戏.不过多了个时间限制,要求在限定时间内从某一点下落到地面.还多了个最大下落高度,一次最多下落这么高,要不然会摔死. 一开始想dp的,然后想了 ...
- hdu 1078(dfs记忆化搜索)
题意:容易理解... 思路:我开始是用dfs剪枝做的,968ms险过的,后来在网上学习了记忆化搜索=深搜形式+dp思想,时间复杂度大大降低,我个人理解,就是从某一个点出发,前面的点是由后面的点求出的, ...
- CodeForces 54C-First Digit Law(数位,概率dp)
题意: 给你n个区间,在每个区间里各取一个数(随机取),求这n个数中超过K%的数是首位为1数的概率 分析: dp[i][j]取前i个数,有j个是首位为1的数的概率 易知,dp[i][j]=dp[i-1 ...
- 【原】Kryo序列化篇
Kryo是一个快速有效的对象图序列化Java库.它的目标是快速.高效.易使用.该项目适用于对象持久化到文件或数据库中或通过网络传输.Kryo还可以自动实现深浅的拷贝/克隆. 就是直接复制一个对象对象到 ...
- dwr消息推送
闲来无事,把自己关于对dwr消息推送的实现过程描述一番. 首先第一步,当然在工程中是加入dwr.jar了,接着在web.xml中配置以下代码 <servlet> <servlet-n ...
- 如何在 Windows Azure 的虚拟机 ubuntu 上面安装和配置 openVPN(三)
第三步:安装openVPN 请打开 ubuntu 官方文档.然后,从上到下,按照步骤,输入执行命令.大家只需要执行到 First trouble shooting 之前即可. 不要怕麻烦,仔细读,一步 ...
- nyoj 20 吝啬的国度
吝啬的国度 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...
- linux系统日常管理
笔者在前面介绍的内容都为linux系统基础类的,如果你现在把前面的内容全部很好的掌握了,那最好了.不过笔者要说的是,即使你完全掌握了,你现在还是不能作为一名合格的linux系统管理员的,毕竟系统管理员 ...
- javascript实现队列功能
- javascript实现栈功能