Created by Mohammed Hussain, Jeff Sallans, Dave Farinelli
JavaScript frontend and backend web application setup. It uses:
1. Create default data directory at C:\data\db
2. Run the following commands:
cd {mongoDB_installation}/Server/3.0/bin
mongod
Should display 'listening on port 27017'
Install Node package Express generator to allow for quickly generating a new Express site.
Run the command:
npm install -g express-generator
Run the express command to generate a new Express site using ejs client-side templates.
Run the command:
express --ejs site-name
Install all node packages currently defined in new site package file.
Run the command:
npm install
Install mongoose Node package to connect to running MongoDB instance.
Run the command:
npm install --save mongoose
var mongoose = require("mongoose");
require("./models/Posts");
mongoose.connect('mongodb://localhost/peanutgallery');
var mongoose = require("mongoose");
var PostSchema = new mongoose.Schema({
title: String,
body: String,
timestamp: Date
});
mongoose.model("Post", PostSchema);
var mongoose = require("mongoose");
var Post = mongoose.model("Post");
router.get("/posts", function(req, res, next) {
Post.find(function(err, posts) {
if (err) {
return next(err);
}
res.json(posts);
});
});
router.post("/posts", function(req, res, next) {
var post = new Post(req.body);
post.save(function(err, post) {
if (err) {
return next(err);
}
res.json(post);
});
});
npm start
<html>
<head>
<title>say something</title>
<script src="/javascripts/angular.min.js"></script>
<script src="/javascripts/pgapp.js"></script>
</head>
<body>
</body>
</html>
(function() {
"use strict";
var app = angular.module("peanutGallery", []);
})();
<body ng-app="peanutGallery">
{{ 1 / (1 / (1 - (3/4))) }}
</body>
"use strict";
var app = angular.module("peanutGallery", []);
app.controller("mainController", [
"$scope",
"$http",
function($scope, $http) {
$scope.test = 1 / (1 / (1 - (3/4)));
}
]);
<body ng-app="peanutGallery" ng-controller="mainController">
{{ test }}
</body>
$scope.posts = [];
$scope.newPost = "";
$scope.init = function() {
$scope.getAllPosts();
}
$scope.getAllPosts = function() {
return $http.get("/posts").success(function(data) {
angular.copy(data, $scope.posts);
});
};
$scope.createNewPost = function() {
var tempPost = {
title: $scope.posts.length + 1 + "",
body: $scope.newPost,
timestamp: new Date()
};
$http.post("/posts", tempPost).success(function(data) {
$scope.posts.push(data);
});
$scope.newPost = "";
};
$scope.init();
<div class="title">
<h1>The Peanut Gallery</h1>
</div>
<div>
<input placeholder="say something" ng-model="newPost" />
<button ng-click="createNewPost()">Submit</button>
</div>
<div ng-repeat="post in posts">
<div>
<h3>{{ post.title }}</h3>
<p>{{ post.body }}</p>
<i>{{ post.timestamp }}</i>
</div>
</div>
Additional domain knowledge
Code vs config files
Go with Gulp
https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4
NPM - Resolves dependencies in a nested structure (used on the backend for easier setup/deploy)
Bower - Resolves dependencies in a flat structure (used on the frontend to keep client code light)
http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm