The MEAN stack: MongoDB, Express, AngularJS, and NodeJS

Mean Stack

Date Title Views Comments

Date
Title
Views
Comments

Getting started with the MEAN stack

14439 97

The hardest part of web development is not knowing where to start, and over thinking the process. Once you’ve jumped over that hurdle, you’ll wonder what you were so worried about! This post goes through the process of installing the MEAN Stack (MongoDB, Express.js, Angular.js, Node.js).

AngularJS Material Starter App in the Mean Stack

6012 15

In this post, we’ll take the angular material starter app discussed during ng-conf 2015, and apply it to a MEAN Stack App.

AngularJS Material Design Toolbar Tips and Tricks

5433 0

We look through the AngularJS Material Design starter app, with tips and tricks for Toolbars: including, layout=”row”, layout=”column”, md-tall, tabs and themes.

The 30 Day MEAN Stack Honolulu Challenge

5416 13

30 jam packed videos with something that you can do with your MEAN Stack app, in less than 15 minutes. A great example and tutorial challenge for anyone new to the mean stack.

Overview of the MEAN Stack App Structure Day 1

5228 0

An overview of the key files and folders in the MEAN Stack App Structure. What is the mean stack? What’s in folders like: Public, App, Config, Node_Modules?

MEAN Stack Intro to Bootstrap Grids Day 2

3939 7

We look at:
– Our App Designs (use cases, storyboard, and wireframes)
– We’ll then take the design and split it into a Bootstrap grid layout.
– Locating the home page in the MEAN Stack app structure
– We start building a responsive web app using Bootstrap!

AngularJS Material Design in your MEAN Stack

3532 11

In this video we’ll add the angular-material package to meanjs, and set up the mean stack to use the angular material toolbar header.

MEAN Stack – Intro to Bootstrap Buttons, Glyphicons, Navbar – Day 3

2872 2

We look at:
– Continuing to build based on our App Design (use cases, storyboard, and wireframes)
– An Introduction to Bootstrap Buttons
– An Introduction to Bootstrap Glyphicons
– A Quick Intro to Chrome Developer Tools
– An Introduction to Bootstrap NavBars
– Changing the color of the MEAN Stack NavBar
– Changing the Brand Label on the NavBar

Install MEAN.js 0.4.0 and run using Gulp

2698 31

It’s time to take MEAN.js version 0.4.0 for a spin! We’ll go through the installation process using the new generator, and run the new app using gulp.

MEAN Stack – Customer CRUD Module with Yeoman – Day 9

2687 17

In this video we’ll start to look at the Customers Pages, and create our very own Customer CRUD Module using the yeoman generator.

We look at:
– The Customers Pages, including the use case, storyboard and wireframes
– Backing up our work using Git
– The different types of generators available with the MEAN Stack
– Using the Yo scaffolding tool to generate a Customer CRUD (create, read, update, delete) module

MEAN Stack – Social Accounts to Sign-in with Facebook – Day 5

2603 7

We’re ready to move onto the Login Page! In this video we’ll look at the MEAN Stack App Login Page, and look at how to set up a MEAN App with Passport.js Facebook authentication.

MEAN Stack – Intro to AngularJS ngRepeat & ngClass – Day 4

2333 9

We’ll look at two Angular directives, looping through an array using ng-repeat, adding some dynamic styles using ng-class and add them to our MEAN Stack

We look at:
– Two Angular Directives
– Looping through an array using ng-repeat
– adding some dynamic styles using ng-class

MEAN Stack – Responsive Bootstrap Login Forms – Day 6

2265 0

In this video we’ll look at changing the MEAN App Login Page, and start to get it to look like our Login page Wireframe.
We look at:
– The MEAN Stack Sign-in page
– The process for changing the details on the sign-in page
– Introduction to Bootstrap Input Groups
– Introduction to Bootstrap Form Groups and Button layouts

MEAN Stack – Deploy to Heroku – Day 30(i)

2255 18

In this video we’ll deploy our app to Heroku

We look at:
– Downloading the Heroku toolbelt from https://toolbelt.heroku.com/
– Signing up to Heroku from https://www.heroku.com/
– Deploying to Heroku

MEAN Stack – Modelling with Mongoose – Day 10

2026 2

In this video we’ll take a look at the Mongoose package, and set up our customers model that we’ll use to create our customers MongoDB collection.

We look at:
– The Customers Pages, with a focus on the create customer storyboard
– The Mongoose website
– The Mongoose documents relating to ‘Defining your schema’
– Setting up our Customers model, based on our storyboard

MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

1966 4

We look at:
– The MEAN Stack Sign-in page
– Creating CSS styles
– Passport.js error messages
– Introduction to Bootstrap Alerts
– Exploring the Angular.js code on the Sign-in page
– Homework – Can you format the Sign-up page? Let me know how you go!

MEAN Stack – AngularJS Models in Bootstrap Forms – Day 12

1961 0

In this video we’ll take the changes that we’ve made to the Angular Customers controller, and start mapping the Angular Model to the Create Customer Page. We also begin to style our Create Customer Page based on our Wireframes.

We look at:
– The Yo generated Create Customer Page, and how we find it using the Angular Routes
– Why the page wouldn’t work because we removed the ‘name’ field from our Schema
– Identify the required bootstrap grid based on our wireframes
– Begin to style the Create Customer Page based on our wireframes
– Some tips and tricks on styling Bootstrap for mobile devices
– We map the Angular customer model to our inputs

AngularJS + Nodemailer Contact Form

1954 5

In this tutorial video we’ll create a working contact form! Each time a user sends a message using the contact form, an email will be sent to your designated email address.

MEAN Stack – Using an AngularJS UI Modal to Update Customers – Day 19

1936 0

In this video we go through an introduction to using Angular UI, and using Angular UI directives in place of Bootstrap JavaScript components. We also start to set-up our ‘Update Customer’ Modal window.

We look at:
– Using Angular UI Bootstrap for JavaScript Bootstrap components
– When custom directives would be used to include vanilla JavaScript to an Angular App
– An Introduction to Angular UI: http://angular-ui.github.io/bootstrap/
– Working through an example of Angular UI for modal windows
– How the Angular UI modal examples ties back to the example code
– Including Angular UI model code back in our app to create an Update Customer Modal

MEAN Stack – MongoDB Queries & AngularJS Scope – Day 15

1882 0

In this video we’ll take a detailed look the query functionality used to return a list of customers from MongoDB to the Angular scope. We’ll also look at how to display the returned data on the List Customers Page.

We look at:
– The List Customers Page that was created from the Yeoman Generator
– The use of the data-ng-init directive
– The workings behind the find() function
– The working behind the Customers.query and how it maps up to search the MongoDB
– Following through the query function from the Angular controller and through to the router and the customer.server.controller
– The mongoose code that is used to query MongoDB to return a list of customers
– Finding query documentation on the MongoDB website
– Using the AngularJS Batarang Plugin to look at the Customer data on the List Customers Page
– The syntax used to display data from the Angular Customers scope on the List Customers Page