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
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.
Ever felt like: OMG! Which web framework should I use? How do I know if I’m picking the right one? WHY IS IT SO HARD!!
In this video we continue styling the Create Customer Page and look at some Angular functionality. We also create our first Customer Record.
We look at:
– Using CSS to style the Create Customer Page
– Create a new Customers CSS File
– Increase the size of the User Glyphicon
– Align the Referred Checkbox to the left using CSS
– Use ng-class to dynamically change the colour of the User Glyphicon based on the Referred checkbox
– Check if we can create a Customer Record without logging in
– Log into the App so that we can use the Customers Menu
– Create our first Customer record
– Look at how $location can be used to route a user to a new view
In this video we’ll use the yeoman generator to create a new Angular.js factory service.
We’re ready to move onto the Login Page! In this video we’ll look at the MEAN Stack App Login Page, and look at how to set up a MEAN App with Passport.js Facebook authentication.
NodeBots Day is just a couple of weeks away, so I want to share what I’ve been doing with Node and Arduino in recent times. This post is aimed at very basic, hello world type examples of using NodeJS as a server to run JavaScript code on Arduino UNO hardware.
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.
We look at:
– Our App Designs (use cases, storyboard, and wireframes)
– We’ll then take the design and split it into a Bootstrap grid layout.
– Locating the home page in the MEAN Stack app structure
– We start building a responsive web app using Bootstrap!
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
We look at:
– Continuing to build based on our App Design (use cases, storyboard, and wireframes)
– An Introduction to Bootstrap Buttons
– An Introduction to Bootstrap Glyphicons
– A Quick Intro to Chrome Developer Tools
– An Introduction to Bootstrap NavBars
– Changing the color of the MEAN Stack NavBar
– Changing the Brand Label on the NavBar
In this video we’ll continue setting up our Update Customer Modal instance using Angular UI. We’ll focus on formatting and styling the Modal window to include the fields and styles that we need based on our wireframes.
We look at:
– A recap of our Angular UI Customer Update Modal
– Connecting to the customers scope to pass a selected customer’s details through to our Modal
– Updating the html template so that we have the formatting and styles as per our wireframes
– Testing to see if our Modal works with our ng-click directive
– Updating our html styles based on styles which are already part of the modal classes
– Passing through the details of a selected customer to the Update Modal