[MEAN Stack] First API -- 4. Organize app structure

时间：2021-09-24 15:05:26

The app structure:

[MEAN Stack] First API -- 4. Organize 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;

相关文章