Quick steps to show you how to remove your existing version of AngularJS Batarang, and how to install a ‘working’ version.
So you can see your Angular Scopes and Models again!
Been wondering how you can leverage your MEAN Stack and/or AngularJS knowledge to create Meteor Apps? So what is Meteor all about, and how did they manage to convince people to invest MILLIONS in what they’re doing?
In this video we’ll break some code! We’ll look at the Customers Controller and break it up to support Create and Edit functions. We’ll also look at how we can remove the data-ng-init directive and use ‘Controller As’ to give our Controller an Alias.
We look at:
– The List Customers Page that was created from the Yeoman Generator
– Breaking the Customers Controller into 3 parts
– Using ‘this’ instead of ‘$scope’
– The use of the data-ng-init directive
– Removing the data-ng-init directive with ‘Controller As’
– Referring to a scope within our new Controller as an Alias
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 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
A context diagram is a great place to start exploring. It lets us look at a problem from the outside, and peel away the layers until we get to the core. This is a great way to understand how a business interacts with the entities that live outside of it.
In this tutorial video we’ll get fancy with Autocomplete! We’ll look at some sweet little tricks that you can use when you’re working with small datasets. Both Local and Remote/Server side sets of data can be handled in a similar once the data is available to AngularJS.
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
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.
We look at:
– The MEAN Stack Sign-in page
– Creating CSS styles
– Passport.js error messages
– Introduction to Bootstrap Alerts
– Exploring the Angular.js code on the Sign-in page
– Homework – Can you format the Sign-up page? Let me know how you go!
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 take the app that we prepared as part of the 30 day mean stack app challenge, and move the customer module files across into the new 0.4 app structure.