[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的运行次 ...
随机推荐
- JMeter使用jar进行压力测试
最近需要对改造的redis缓存接口做压力测试,使用了开源压力测试工具JMeter,分享一下自己的使用经验,希望能对需要进行压力测试的开发同学有所帮助. JMeter介绍 JMeter是Apache软件 ...
- Brackets sequence
题意: 给你一个括号序列(有中小括号),求出以给定序列为子序列的最小合法括号序列. 分析: 非常经典,以前做过相似一道题,用区间dp,但怎么把这个序列求出来没想出来. dp[i][j]表示区间i-j是 ...
- IOS 支付宝 SDK 申请
https://b.alipay.com/order/productDetail.htm?productId=2013080604609654&tabId=4#ps-tabinfo-hash
- <转>数据库设计的三大范式
为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...
- duilib List控件,横向滚动时列表项不移动或者移动错位的bug的修复
转载请说明出处,谢谢~~ 这篇博客已经作废,只是留作记录,新的bug修复博客地址:http://blog.csdn.net/zhuhongshu/article/details/42264673 之前 ...
- cannot conform to protocol 的一点事
学习UITableView过程中,回想视频打一遍代码,发现卡在了第一步.一直显示无法继承协议,而且还多了一个错误:definition conflicts with previous value.百度 ...
- 使用PHP绘制统计图
使用PHP画统计图的方法 第一种方法 <?php //最后一次修改:2004-6-21 //一个生成矩形图,曲线图的图形分析类 //作者:tonera //说明: //任何人可在任何场合自由使用 ...
- CUDA 进阶学习
CUDA基本概念 CUDA网格限制 1.2CPU和GPU的设计区别 2.1CUDA-Thread 2.2CUDA-Memory(存储)和bank-conflict 2.3CUDA矩阵乘法 3.1 全局 ...
- java console ( mac osx ) 命令行编码
方法 vi ~/.bash_profile #添加新行, UTF-8表示你平台的编码方式 #例如你是GBK.GB18030的 #替换成你平台console可现实字符编码即可 export JAVA_T ...
- Cocos2dx游戏源码合集(BY懒骨头+持续更新+2014.02.21)
转自:http://blog.csdn.net/iamlazybone/article/details/19612941 声明: <萝莉快跑><喵汪大战>两个demo的原作者b ...