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

In this video we’ll prepare our mean.js app and get it ready to deploy!!

We look at:
– Using the Grunt Build command to create our application files
– Setting up a new MongoDB for production
– Hooking our new MongoDB instance in our production file
– Commit our file changes using Git

Woohoo now we’re ready to deploy!

In this video we’ll clean up our app and answer some questions sent through via email and posted on the Bossable.com site. We’ll fix some errors, pretty up our customers list, add a picklist using ng-options, and fix the alignment between channel and email.

We look at:
– Fixing some of the task errors identified by Grunt
– Using Chrome to test out adding some padding between the customer records in the customers list
– Adding a new class with padding to our customers css file
– Using ng-class to add some colours to the customers list based on the referred field.
– Increase the size of the icon on the customers list
– Adding drop down values to our app using ng-options
– The AngularJS documentation and examples for ng-options
– Adding ng-options to our controller and edit customers client view
– Testing our new picklist in the Update Customer Modal
– Fixing the alignment of fields between the Channel and Email fields.

In this video we’ll create our own notification service using an AngularJS Factory with publication and subscription methods. We’ll use this service to send messages between our Create Customer Modal, and our Customer List to refresh the list when a new customer is created.

We look at:
– Creating a new AngularJS notification Factory Service
– Setting up functionality within the Service to send a message and data
– Setting up functionality with the Service to receive a message and data
– Hooking up our Create Customer Controller with the new notification service
– Using the new notification service to send data when a new customer is created
– Hooking up our Customer List directive with the new notification service to update the list when a new customer is created
– Creating a new customer to test out our new Service

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

In this video we’ll start to set-up our AngularJS Create Customer Modal. We’ll begin by turning our create customer view into a Modal window, and get it to popup using the ‘New Customer’ button.

We look at:
– The current create customer view
– Changing the top and bottom of the create customer view to align it with the update customer modal
– Changing our references to refer to the customer create controller
– Changing the controller alias references on the new Create Modal buttons
– Setting up the Create Customer Controller by reusing the existing create function and changing it up
– Using the code for the update customer modal directive as a template to create a new create customer modal directive.
– Adding a reference to our new Modal from the Customer List ‘Create Customer’ button
– Opening up our new Create Customer Modal

In this video we’ll create our own custom AngularJS directive. We’ll look at pulling out our list of customers and putting it into its own template, we’ll then glue the view and list back together using a directive.

We look at:
– An introduction to directives
– Locating Angular directives within our code
– Different types of directives
– The AngularJS documentation on directives
– Referring to directives using camel-case
– Creating our own custom elements/tags
– Moving our reusable code into a template
– Gluing our custom elements and template together using a directive
– Cleaning up our customer routes

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

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 continue setting up our Update Customer Modal instance using Angular UI. We’ll focus on formatting and styling the Modal window to include the fields and styles that we need based on our wireframes.

We look at:
– A recap of our Angular UI Customer Update Modal
– Connecting to the customers scope to pass a selected customer’s details through to our Modal
– Updating the html template so that we have the formatting and styles as per our wireframes
– Testing to see if our Modal works with our ng-click directive
– Updating our html styles based on styles which are already part of the modal classes
– Passing through the details of a selected customer to the Update Modal

In this video we’ll continue setting up our Update Customer Modal instance and controller so that we can select a customer record and pop open the Modal. We’ll also do a quick test to see if we can send the details of a selected customer and display the details on the Update Customer Modal.

We look at:
– A recap of adding Angular UI model code back in our app to create an Update Customer Modal
– Setting up our Modal Instance and Controller
– How we pass a selected customer’s details through to our Modal
– How we choose the template that we want to use (to display the html layout) within our Modal
– Selecting pieces of Angular UI example code to set up our Modal controller instance
– Testing to see if our Modal works by hooking it into an ng-click directive
– Passing through the details of a selected customer to the Update Modal

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

In this video we’ll add a search input and new customer button to our List Customers Page. We’ll also use AngularJS Filters to connect our search input to our list of customers, to let us filter through our list of customers.

We look at:
– Continuing to set up the List Customers Page
– Determining the grid layout for mobile vs. larger devices
– Using col-xs and col-sm to change grid sizes based on device size
– Finding and using Bootstrap classes for input-groups for our search bar
– Adjusting the size of input-groups and buttons to align to the wireframe
– Connecting the search input to the list of customers
– Finding Angular Filter documentation on the AngularJS website
– Using Angular Filter syntax to add filtering functionality to our app
– Adding place-holder text to our Search input

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