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

Mean Stack

Date Title Views Comments

Date
Title
Views
Comments

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 – Express.js & Client-side Assets – Day 29

1157 0

In this video we’ll look at express.js, and how it hooks together the back-end of our MEAN app. We’ll also look at setting up client side CSS and JS assets for our app, both core and minified versions.

We look at:
– Expressjs.com documents and key pages to start with
– The different packages that make up the express portion of the MEAN Stack
– The Server.js file, and how it is used to connect off to a number of other files that run our app
– The Express.js file, and how different elements of the app files are loaded and used by Express.
– The environment files that are used to load CSS and JS assets for our app
– Loading core and minified files as assets for our app
– Loading assets and connecting to MongoDB in a production environment

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

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

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

AngularJS Custom Actions for ExpressJS

AngularJS + Nodemailer Contact Form

MEAN Stack – Deploy to Azure

AngularJS Material Design Toolbar Tips and Tricks

AngularJS Material Design Side Project Sneak Peak

AngularJS Material Starter App in the Mean Stack

AngularJS Material Design in your MEAN Stack

MEAN.js Transition to 0.4 – Part 2

MEAN.js Transition to 0.4 – Part 1

Create a vertical MEAN.js 0.4 crud module

Install MEAN.js 0.4.0 and run using Gulp

Set up a free MongoDB database using Compose.io

MEAN Stack – Side by Side with Version 0.4.0

Add an AngularJS module to your MEAN Stack App

MEAN Stack: Create an AngularJS Controller with Yeoman

MEAN Stack: Create an AngularJS Directive with Yeoman

MEAN Stack: Create an AngularJS Service with Yeoman

MEAN Stack – Deploy to Digital Ocean

MEAN Stack – Deploy to Nodejitsu

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