/mean-stack

MEAN Stack Tutorial with checkpoint branches

Primary LanguageJavaScript

MEAN Stack Tutorial

This repository represents the end state of the tutorial. The different branches of this repository correspond to checkpoints during the tutorial.

Installation

  • Clone this repository
  • cd mean-stack
  • npm install
  • Complete database setup (see below)
  • npm start
  • Visit http://localhost:3000

Database Setup

mongoimport --db ADASS --collection stars --file 100k_stars.csv --type csv --headerline

Cheatsheet

  • MEAN Stack Cheatsheet - Useful list of commands, file descriptions, and code snippets. A printed copy of the cheatsheet will be handed out at the start of the tutorial

Tutorial Slides

The slides used during the ADASS Tutorial on 2017-11-11 are in tutorial_slides.pdf

Tutorial Checkpoints

At various points in the tutorial, attendees will be asked to switch to a particular checkpoint within this repository. This ensures that all attendees are on the same page and have a working version of the code to proceed to the next section.

To Use Checkpoints

Take the following steps to preserve any changes you have made on a new branch before switching to the specified checkpoint branch

  • git checkout -b ${new branch name}
  • git commit -am 'saving my changes'
  • git checkout -t origin/checkpoint_${n}
  • npm install
  • npm start

Checkpoint Descriptions

checkpoint_1

  • Used Express Generator to create project
  • Installed nodemon
  • Modified package.json to use nodemon
Verify checkpoint:

  • Visit http://localhost:3000 - you should see Express default view in browser window

  • In node console should see:

    • [nodemon] starting `node ./bin/www`

checkpoint_2

  • Mongoose node package installed
  • models.js created to connect to mongo using mongoose
  • app.js modified to require model.js and call db.init()
Verify checkpoint:
  • In node console you should see:
    • Successfully connected to database

checkpoint_3

  • Added Star schema to models.js
  • Required models.js in routes/index.js
  • Added /stars route to query stars collection in mongo
  • Checked for limit url parameter and set default otherwise
Verify checkpoint:

checkpoint_4

  • Made the node_modules directory available as a public route
  • Installed bootstrap/bootswatch to make our UI nicer
  • Installed Angularjs
  • Added angular and bootstrap as source files to 
public/index.html
  • Created simple Hello World!  AngularJS application
Verify checkpoint:

checkpoint_5

  • Created angular module 'myApp'
  • Created SearchController for myApp
  • Defined columns to display
  • Created doSearch function to get data from /stars
  • Added button to execute doSearch()
  • Added table with ng-repeats to display column headers and returned data
  • Used ng-if to show magnitude errors if they exist
Verify checkpoint:

checkpoint_6

  • Added form elements
  • Created search object with regex and lt/gt logic in angular function
  • Switched API from GET to POST
  • Pass POST data to mongo find(), then return and render matching results
Verify checkpoint:

checkpoint_7

  • Used angular forEach and ng-repeat to expand form to query all magnitudes
Verify checkpoint:

checkpoint_8

  • Added form elements for positional search
  • Updated schema in models.js to add location field
  • Created conditional positional search query in routes/index.js
  • Ran Mongo commands to create GeoJSON points
Verify checkpoint:

  • Run the following commands in the mongo shell:

    use ADASS; 
db.stars.find().forEach(
    function (elem) {
        db.stars.update(
            {
                _id: elem._id
            },
            {
                $set: {
                    location: { type: "Point", coordinates: [elem.ra - 180.0, elem.dec]}
                }
            }
        );
    }
);

  • Visit http://localhost:3000

    • Run positional search queries through UI to see if results match.
    • Try RA=302.495 DEC=-45.502 and radius=300