Ever felt like: OMG! Which web framework should I use? How do I know if I’m picking the right one? WHY IS IT SO HARD!!
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.
I’ll show you my approach to web design, with my first sketches for a new project that I’m working on. A requirements sketch, and some first wonky wire frames.
In this video we’ll use Angular directives and Bootstrap plus a bit of CSS to begin to format our List Customers Page. During the video, we also have a look at Angular Filters and a reference to the Angular documentation for Filters.
We look at:
– Setting up the List Customers Page
– An introduction to Angular Filters
– AngularJS Documentation for Filters on the angular.org website.
– Using population to display the name of the user who created a Customer record
– Using Bootstrap and Angular to format our List of Customers
– Using Bootstrap columns to display differently depending on the device used
– Using CSS to style our User icons
In this video we’ll use the yeoman generator to create a new Angular.js factory service.
This approach is not too dissimilar from something that you might see in a business case. After all, the more we understand about the business drivers, the more we can reduce assumptions, and focus on the real, underlying problems.
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
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.
In this video we’ll make some final changes to our Update Customer Modal instance using Angular UI. We’ll use the AngularJS data-model references and classes, as well as an introduction to Form validation with AngularJS.
We look at:
– A recap of our Angular UI Customer Update Modal
– Using the AngularJS curly brackets to display the name of customer in the Modal
– Updating the refererence to the ‘referred’ data model
– Updating the colour of the User glyphicon when the referred icon is checked using ng-class
– Form validation by adding mandatory fields to our Modal
– Adding a Form name to reference our Form from our Controller
– Checking to see if a Form is valid from within our Controller
– Disabling the Save & Close button when the Form is invalid
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).
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?
In this video we’ll style our AngularJS Create Customer Modal, and create our first customer using our new Modal. We’ll then add functionality to delete Customers from our list.
We look at:
– A quick recap of opening up our new Create Customer Modal
– Changing the ng-class reference for the Referred field (from danger to pink)
– Making the Surname field a required field
– Creating a reference from our model fields back to our controller
– Creating a new customer using our Create Customer Modal
– Checking our console logs to tell if our record was saved
– Refreshing the page to show our new customer record
– The functions that are still missing from our Controllers
– Adding ‘Delete’ functionality to our controller
– Adding a new button with ng-click to call the delete functionality
– Deleting a customer record from our list of customers