We’ll pick this video up from the end of the AngularJS Material Design Toolbar Tips and Tricks and extend it out further to get working Tabs with external templates, and ui-router, we’ll also look at forms, and toasts.
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?
The Girl Geek Academy is here! I’ve even signed up to teach! It’s such a great concept – The first female-founded global learning academy for girl geek hackers, hustlers, and hipsters.
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.
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’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
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
It can be really frustrating when setting up your Windows environment for NodeJS, with packages like Yo, Grunt, Bower etc and Stack Overflow says Fix your PATH
In this video I’ll introduce you to two of my favourite tools, Mongo Explorer and AngularJS Batarang.
We look at:
– Mongo Explorer – a Webstorm Plugin which lets us connect to our MongoDB and explore our Collections and the records contained within them
– AngularJS Batarang – a Chrome Plugin which helps us take a sneak peak behind our view
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
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?
Behaviour driven tests are also a great way to make sure that the requirements aren’t forgotten about as the project progresses. There’s no better way to show progress than when you can easily show how many tests are passing at any point in time.