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 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 post, we’ll take the angular material starter app discussed during ng-conf 2015, and apply it to a MEAN Stack App.
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 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 deploy our app to DigitalOcean.
For a free $10 Credit – use my referral ID: 3077d5b2118a www.digitalocean.com/?refcode=3077d5b2118a
We look at:
– The quick steps to create a new Digital Ocean account
– Downloading PuTTY if you’re using a Windows machine
– Creating SSH keys using PuTTYgen
– Adding SSH keys to Digital Ocean
– Creating a new Node.js Droplet
– Using PuTTY to connect to our new Droplet
– Checking the Node.js version of our Droplet
– Push our app up quickly to Bitbucket or GitHub
– Copy the SSH/HTTPS link for our Bitbucket project
– Install Git on our Droplet
– Create a copy of the app on our Droplet using Git and Bitbucket
– CD into the folder for the new app
– Npm install
– Bower install
– Grunt install
– Run our app using Grunt
– Connecting and opening up our app
In this video we’ll look at: Nodejitsu is shutting down! We’ll deploy a mean stack app to Azure. We’ll look at how to create an Azure Web App, deploying to Azure using continuous source control, and fixing .NET errors following deployment.
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
New customers are often referred to App-Makers by existing or previous customers (which is a great thing!). However, this can often mean that early interactions with a customer are recorded in Facebook chat, SMS messages, and emails with different members of the team.
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
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.
Here are 3 quick tips that will help you create beautiful Material Design Wire-frames, with templates, icons, and colour combinations.