The app structure:

Front-end: app.js

  1. /**
  2.  * Created by Answer1215 on 12/9/2014.
  3.  */
  4. 'use strict';
  5.  
  6. function MainCtrl(PeopleService) {
  7.     var vm = this;
  8.     vm.people = [];
  9.     vm.selectedPerson = {};
  10.  
  11.    vm.getPeople = PeopleService.getPeople().then(function(response) {
  12.         vm.people = response.data;
  13.     });
  14.  
  15.     vm.selectPerson = function(person) {
  16.         PeopleService.getSelectedPerson(person).then(function(response) {
  17.             vm.selectedPerson = response.data;
  18.             vm.selectedPerson.fullName = response.data.firstName + " " + response.data.lastName;
  19.         });
  20.  
  21.     }
  22.  
  23. }
  24.  
  25. function PeopleService($http) {
  26.  
  27.     var PeopleService = {};
  28.     PeopleService.getPeople = function() {
  29.         return $http.get('http://localhost:3000/people');
  30.     }
  31.  
  32.     PeopleService.getSelectedPerson = function(person) {
  33.         return $http.get('http://localhost:3000/people/'+person._id);
  34.     }
  35.  
  36.     return PeopleService;
  37. }
  38.  
  39. angular.module('app',[
  40.     'ngResource'
  41. ])
  42.     .controller('MainCtrl', MainCtrl)
  43.     .service('PeopleService', PeopleService);
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
  7. </head>
  8. <body ng-app="app">
  9.  
  10. <div class="row" ng-controller="MainCtrl as vm">
  11.     <div class="col-xs-4">
  12.         <ul>
  13.             <li ng-repeat="person in vm.people" ng-click="vm.selectPerson(person)">{{person.firstName}}</li>
  14.         </ul>
  15.     </div>
  16.     <div class="col-xs-6">
  17.         <h2>{{vm.selectedPerson.fullName}}</h2>
  18.         <span>{{vm.selectedPerson.email}}</span>
  19.     </div>
  20. </div>
  21.     <script src="bower_components/angular/angular.min.js"></script>
  22.     <script src="bower_components/angular-resource/angular-resource.min.js"></script>
  23.     <script src="app.js"></script>
  24. </body>
  25. </html>

Backend:

server.js

  1. 'use strict';
  2.  
  3. var express = require('express');
  4. var cors = require("cors");
  5. var app = express();
  6. app.use(cors());
  7. var people = require('./controller/people');
  8.  
  9. app.get('/people', people.getAll);
  10. app.get('/people/:id', people.get);
  11.  
  12. app.listen(3000);

controller/people.js

  1. /**
  2.  * Created by Answer1215 on 12/26/2014.
  3.  */
  4. var model = require('../model/people');
  5.  
  6. exports.getAll = function(request, response){
  7.     model.getAll(function(err, data) {
  8.         if(err) response.json(503, {error: true});
  9.  
  10.         response.json(200, data);
  11.     });
  12. }
  13.  
  14. exports.get = function(request, response){
  15.     var id = request.params.id;
  16.     model.get(id, function(err, data) {
  17.         if(err) response.json(503, {error: true});
  18.  
  19.         response.json(200, data);
  20.     });
  21. }

model/people.js

  1. /**
  2.  * Created by Answer1215 on 12/26/2014.
  3.  */
  4. var mongoose = require('../lib/mogoose');
  5.  
  6. var personSchema = {
  7.     firstName:String,
  8.     lastName:String,
  9.     email:String
  10. };
  11.  
  12. //create a person model, and rename db as people
  13. var Person = mongoose.model('Person', personSchema);
  14.  
  15. exports.getAll = function(callback) {
  16.     Person.find().select("firstName").exec(function(err, data) {
  17.        // response.json(200, data);
  18.         callback(err, data);
  19.     });
  20. }
  21.  
  22. exports.get = function(id, callback){
  23.     Person.findById(id, function(err, data) {
  24.         //response.send(data);
  25.         callback(err, data);
  26.     });
  27. }

lib/mogoose.js

  1. /**
  2.  * Created by Answer1215 on 12/26/2014.
  3.  */
  4. var mongoose = require('mongoose');
  5. mongoose.connect('mongodb://localhost/simple');
  6.  
  7. module.exports = mongoose;

[MEAN Stack] First API -- 4. Organize app structure的更多相关文章

  1. [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 ...

  2. [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' ...

  3. [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 ...

  4. [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 ...

  5. Spark2.3（四十）：如何使用java通过yarn api调度spark app，并根据appId监控任务，关闭任务，获取任务日志

    背景: 调研过OOZIE和AZKABA,这种都是只是使用spark-submit.sh来提交任务,任务提交上去之后获取不到ApplicationId,更无法跟踪spark application的任务 ...

  6. 淘宝用户api 如何获得App Key和API Secret

    下面我们通过截图的方式详细说明申请淘宝应用的步骤. 一.访问淘宝开放平台http://open.taobao.com/ 申请成为合作伙伴 二.填写个人信息申请入住 三.点击创建应用 四.填写应用名称, ...

  7. Andorid API Package ---> android.app

    包名: android.app                                     Added in API level 1       URL:http://developer. ...

  8. 基于腾讯云监控 API 的 Grafana App 插件开发

    Tencent Cloud Monitor App Grafana 是一个开源的时序性统计和监控平台,支持例如 elasticsearch.graphite.influxdb 等众多的数据源,并以功能 ...

  9. 使用私有api统计ios app运行时间及次数

    利用<iphone SprintBoard部分私有API总结>中提到的私有API,可以做很多越狱以前实现不了的事情. 比如,利用一个后台运行的app,监控该iphone上所有app的运行次 ...

随机推荐

  1. [转] arcgis Engine创建shp图层

    小生 原文 arcgis Engine创建shp图层 以创建点图层为例.首先要得到保存文件的地址. SaveFileDialog saveFileDialog = new SaveFileDialog ...

  2. 1048 图的宽度优先遍历序列 c语言

    描述 图(graph)是数据结构 G=(V,E),其中V是G中结点的有限非空集合,结点的偶对称为边(edge):E是G中边的有限集合.设V={0,1,2,……,n-1},图中的结点又称为顶点(vert ...

  3. mybatis返回HashMap结果类型与映射

    <!-- 返回HashMap结果 类型--> <!-- 如果想返回JavaBean,只需将resultType设置为JavaBean的别名或全限定名 --> <!-- T ...

  4. Backbone.js developer 武汉 年薪8w-10w

    1.   精通Backbone.js 2.   熟练Ajax.NoSQL.RESTful APIs 3.   了解Pusher.com和 Parse.com 4.   具有良好的沟通能力,学习能力,敬 ...

  5. restsharp发送服务端请求回传session

    今天工作遇到这样一个场景,我需要获取一个游戏目录列表,这个列表接口在线上已经存在,但是这个接口需要登录认证后才能获取到,所以实现这个功能我打算分两部来做: 1.首先调登录接口,以写上session 2 ...

  6. [Hive - LanguageManual] VirtualColumns

    Virtual Columns Simple Examples Virtual Columns Hive 0.8.0 provides support for two virtual columns: ...

  7. centos6.4 安装erlang

    erlang官网: http://www.erlang.org 下载程序去年:

  8. 【VB技巧】VB静态调用与动态调用dll详解

    本文“[VB技巧]VB静态调用与动态调用dll详解”,来自:Nuclear'Atk 网络安全研究中心,本文地址:http://lcx.cc/?i=489,转载请注明作者及出处! [[请注意]]:在以下 ...

  9. COS回应7大质疑

    Apple过于封闭,没啥朋友,这家伙应该比较高傲,曾和Intel,IBM and so on..一起玩过!Google过于开放,狐朋狗友,友人泛滥,殃及ecosystem,弊端已显,祸水将至.COS奉 ...

  10. Java多线程编程模式实战指南：Active Object模式（下）

    Active Object模式的评价与实现考量 Active Object模式通过将方法的调用与执行分离,实现了异步编程.有利于提高并发性,从而提高系统的吞吐率. Active Object模式还有个 ...