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 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 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 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 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 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 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 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