In this video we’ll use the yeoman generator to create a new Angular.js factory service.
Once we’ve locked in a set of requirements, we can start designing! We’ll begin by creating a list of use cases, and storyboards (scenarios). Storyboards and wire-frames are often created in parallel, and changing one normally leads to changes in the other.
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).
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 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 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
GitHub: has millions of public and private repositories, with thousands more being added everyday. GitHub repositories or ‘repos’, are used as a collaborative means of source control. Github allows a granular level of change control and code management. This means that code changes can be clearly identified, issues can be addressed, and new features can be requested, all in one place.
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 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 take a detailed look the query functionality used to return a list of customers from MongoDB to the Angular scope. We’ll also look at how to display the returned data on the List Customers Page.
We look at:
– The List Customers Page that was created from the Yeoman Generator
– The use of the data-ng-init directive
– The workings behind the find() function
– The working behind the Customers.query and how it maps up to search the MongoDB
– Following through the query function from the Angular controller and through to the router and the customer.server.controller
– The mongoose code that is used to query MongoDB to return a list of customers
– Finding query documentation on the MongoDB website
– Using the AngularJS Batarang Plugin to look at the Customer data on the List Customers Page
– The syntax used to display data from the Angular Customers scope on the List Customers Page
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 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