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
In this video we’ll deploy our app to Nodejitsu. Installing the npm package ‘jitsu’, Using the jitsu package, Updating our package.json file for Nodejitsu
In this video we’ll break some code! We’ll look at the Customers Controller and break it up to support Create and Edit functions. We’ll also look at how we can remove the data-ng-init directive and use ‘Controller As’ to give our Controller an Alias.
We look at:
– The List Customers Page that was created from the Yeoman Generator
– Breaking the Customers Controller into 3 parts
– Using ‘this’ instead of ‘$scope’
– The use of the data-ng-init directive
– Removing the data-ng-init directive with ‘Controller As’
– Referring to a scope within our new Controller as an Alias
In this video we’ll look at how you can quickly and easily create professional looking wireframes using Adobe Illustrator, and free bootstrap vector graphic templates and vector icons.
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.
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.
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!
In this video we’ll continue setting up our Update Customer Modal instance using Angular UI. We’ll focus on the buttons within the Modal to trigger the update function, save the data and close the Modal window, or cancel out of the Modal window.
We look at:
– A recap of our Angular UI Customer Update Modal
– Locating the ‘ok’ and ‘cancel’ functions from the Angular UI documentation
– Adding the ‘ok’ and ‘cancel’ functions to the Update Modal instance
– Aligning our button details to our wireframes
– Adding the update function to the Customers Update Controller
– Adding a reference to the update function from the Update Modal
– Testing out our Model by updating customer details
In this video we’ll have some fun and bootstrap/style out the sign-up page.
We look at:
– The MEAN Stack Sign-up page
– Easily formatting pages using our styles
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.
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).
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.