Node CRUD

What We'll Use

  • Node
  • Express
  • MongoDB
  • Mongoose

What We'll Build

  • Manage Olympic events
  • Create events
  • Show events (read)
  • Edit events
  • Delete events

App Structure

  • |- app/
  • |----- controllers/
  • |----- models/
  • |- routes.js
  • |- public/
  • |- views/

MongoDB

JSON objects are everywhere

Olympic Events

{
    name: 'Basketball',
    slug: 'basketball',
    description: 'Throwing balls into baskets.'
}

Connecting to MongoDB

  • Connection string (URI)
  • User and pass
  • Database

MongoDB URI

Local

mongodb://<user>:<pass>@localhost/olympics

Remote

mongodb://<user>:<pass>@ds1343.mlab.com:43234/olympics

mLab

For a quick remote database

Environment Variables

Keeping secrets a secret

Event Model

Convenient data handling in Node

Convenient Methods

  • Event.find()
  • Event.findOne()
  • Event.save()
  • Event.remove()

Seeding Our Database

Sample data to work with

Robomongo

See what's in the database

Refactoring

A JS Task

Getting Events

Creating Events

Showing Messages

Validation + Errors

Editing Events

Deleting Events

Reloading the Browser

Database Migrations

users

  • name
  • email
  • avatar
  • username
  • password
  • role

posts

  • user_id
  • title
  • slug
  • image
  • content
  • status
  • published_at

Model Factories

Create sample data quickly.

Seeding Our Database

Fill our database with sample data.

Routing Our App

Top down overview.

 

  • Home Page
  • Single Page
  • Contact Page

Assets

CSS and JS for our application.

 

  • Using gulp and Laravel Elixir
  • Using Sass
  • Using jQuery
  • Using Bootstrap

Styling the Site

Styling Post Components

Blade Layouts

Simple and extendable views.

Contact Page

  • Showing a Form
  • Processing a form
  • Sending an email

Authentication

  • Built-in Laravel authentication
  • Creating login/register views

Profile Pages

  • View a user profile
  • Let a user edit their own profile

Admin Dashboard

  • Only admins can access
  • CRUD posts
  • New Dashboard namespace

Dashboard Routes

  • Home page
  • Posts resource controller

List All Posts

Create a Post

Edit a Post

Delete a Post

Authenticating the Dashboard

Only admins can access.

Dashboard Links

Only admins can see.

Angular 1: Routing with ngRoute

By Chris Sevilleja

Made with Slides.com

Angular 1: Routing with ngRoute

  • 1,113

More from Chris Sevilleja