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.
I’ll show you my approach to web design, with my first sketches for a new project that I’m working on. A requirements sketch, and some first wonky wire frames.
Lets take the Mean Stack angular material design app created in the AngularJs Material Starter series, and move the code into a new Meteorjs app.
An introduction to functional design. We’ll identify a subset of requirements and create an interaction flow. We’ll then look at each step in the interaction flow with: use cases, storyboards, wireframes and business rules.
We go behind the scenes with early designs for a Material Design Web App that I’m working on, and some insight into the types of things that designers need to consider for UX that is created for a specific audience.
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.
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 update the customers model, and look at how the model links through the various files and down to the angular customer controller. Then we’ll start making some updates to our angular controller.
We look at:
– Quick updates to the Customers Model
– The glue between the Customers Server Model and the Customers Server Controller
– The glue between the Customers Server Controller and the Server Routes
– The glue between the Server Routes and the Angular Factory Service
– The glue between the Angular Customers Factory Service and the Angular Customers Controller
– Lastly, we update the create function within the Angular Customers Controller to include the data that we want to pass to our Customers Server Model
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.
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.
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.
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.
Discussions
PJJanuary 21, 2017 at 9:58 am
PJJanuary 20, 2017 at 4:33 am
Patricio VargasDecember 21, 2016 at 5:36 pm
aljazerzenDecember 4, 2016 at 12:26 am
PradeepOctober 3, 2016 at 9:12 pm