Bossable: idea to boss with fun tutorials, examples and videos
  • Latest
  • Store
  • Mean Stack
  • 30 Day MEAN Stack Challenge
  • Web Apps
  • Tech
  • Say Hello
BOSSABLE
  • MEAN Stack – Create Customer AngularJS Modal – Day 25
  • AngularJS Material Design Side Project Sneak Peak
  • MEAN Stack – Deploy to Azure
  • MEAN Stack – Answering Q’s with CSS & AngularJS directives – Day 28
  • Get AngularJS Batarang Working in Chrome
  • MEAN Stack – Mongo Explorer & AngularJS Batarang – Day 14
  • Functional Interaction Design – Part 6
  • Create a vertical MEAN.js 0.4 crud module
  • MEAN Stack – Prepare the Build Package for Deployment – Day 30
  • MEAN Stack – Social Accounts to Sign-in with Facebook – Day 5
  • MEAN Stack: Create an AngularJS Controller with Yeoman
  • MEAN Stack – Custom tags with AngularJS directives – Day 24
  • Set up a free MongoDB database using Compose.io
  • MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20
  • MEAN Stack: Create an AngularJS Directive with Yeoman
  • MEAN Stack – Style the Create Customer Page – Day 13
  • Add an AngularJS module to your MEAN Stack App
  • MEAN Stack: Create an AngularJS Service with Yeoman
  • MEAN Stack – AngularJS Notification Service – Day 27
  • Girl Geek Academy Launch Party!
Take back control of your -g NodeJS packages on Windows

Take back control of your -g NodeJS packages on Windows

April 22, 2015 by bossable

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

View Details
MEAN Stack – Client & Server Glue – Day 11

MEAN Stack – Client & Server Glue – Day 11

September 13, 2014 by bossable

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

View Details
Behaviour Driven Requirements – Part 4

Behaviour Driven Requirements – Part 4

July 31, 2014 by bossable

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.

View Details
MEAN Stack – Deploy to Digital Ocean

MEAN Stack – Deploy to Digital Ocean

October 8, 2014 by bossable

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

View Details
MEAN Stack – Mongo Explorer & AngularJS Batarang – Day 14

MEAN Stack – Mongo Explorer & AngularJS Batarang – Day 14

September 16, 2014 by bossable

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

View Details
MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20

MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20

September 22, 2014 by bossable

In this video we’ll continue setting up our Update Customer Modal instance and controller so that we can select a customer record and pop open the Modal. We’ll also do a quick test to see if we can send the details of a selected customer and display the details on the Update Customer Modal.

We look at:
– A recap of adding Angular UI model code back in our app to create an Update Customer Modal
– Setting up our Modal Instance and Controller
– How we pass a selected customer’s details through to our Modal
– How we choose the template that we want to use (to display the html layout) within our Modal
– Selecting pieces of Angular UI example code to set up our Modal controller instance
– Testing to see if our Modal works by hooking it into an ng-click directive
– Passing through the details of a selected customer to the Update Modal

View Details
MEAN Stack – Express.js & Client-side Assets – Day 29

MEAN Stack – Express.js & Client-side Assets – Day 29

October 1, 2014 by bossable

In this video we’ll look at express.js, and how it hooks together the back-end of our MEAN app. We’ll also look at setting up client side CSS and JS assets for our app, both core and minified versions.

We look at:
– Expressjs.com documents and key pages to start with
– The different packages that make up the express portion of the MEAN Stack
– The Server.js file, and how it is used to connect off to a number of other files that run our app
– The Express.js file, and how different elements of the app files are loaded and used by Express.
– The environment files that are used to load CSS and JS assets for our app
– Loading core and minified files as assets for our app
– Loading assets and connecting to MongoDB in a production environment

View Details
MEAN Stack – Listing Customers with AngularJS & Bootstrap – Day 17

MEAN Stack – Listing Customers with AngularJS & Bootstrap – Day 17

September 19, 2014 by bossable

In this video we’ll use Angular directives and Bootstrap plus a bit of CSS to begin to format our List Customers Page. During the video, we also have a look at Angular Filters and a reference to the Angular documentation for Filters.

We look at:
– Setting up the List Customers Page
– An introduction to Angular Filters
– AngularJS Documentation for Filters on the angular.org website.
– Using population to display the name of the user who created a Customer record
– Using Bootstrap and Angular to format our List of Customers
– Using Bootstrap columns to display differently depending on the device used
– Using CSS to style our User icons

View Details
MEAN Stack – AngularJS Models in Bootstrap Forms – Day 12

MEAN Stack – AngularJS Models in Bootstrap Forms – Day 12

September 14, 2014 by bossable

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

View Details
MEAN Stack – Styling our AngularJS UI Customer Update Modal – Day 21

MEAN Stack – Styling our AngularJS UI Customer Update Modal – Day 21

September 23, 2014 by bossable

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

View Details
Do you know what day it is? It’s #nodebotsday!

Do you know what day it is? It’s #nodebotsday!

July 28, 2014 by bossable

  I had so much fun mentoring at NodeBots day in Melbourne! I got to meet a great bunch of people from such diverse backgrounds, and all with a love for learning and experimenting. The day started off with registrations. We got to the venue just before 10am, and people were already lining up, so the registration process […]

View Details
MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

September 9, 2014 by bossable

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!

View Details
Take back control of your -g NodeJS packages on Windows

Take back control of...

MEAN Stack – Client & Server Glue – Day 11

MEAN Stack – Client...

Behaviour Driven Requirements – Part 4

Behaviour Driven Requirements –...

MEAN Stack – Deploy to Digital Ocean

MEAN Stack – Deploy...

MEAN Stack – Mongo Explorer & AngularJS Batarang – Day 14

MEAN Stack – Mongo...

MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20

MEAN Stack – Pass...

MEAN Stack – Express.js & Client-side Assets – Day 29

MEAN Stack – Express.js...

MEAN Stack – Listing Customers with AngularJS & Bootstrap – Day 17

MEAN Stack – Listing...

MEAN Stack – AngularJS Models in Bootstrap Forms – Day 12

MEAN Stack – AngularJS...

MEAN Stack – Styling our AngularJS UI Customer Update Modal – Day 21

MEAN Stack – Styling...

Do you know what day it is? It’s #nodebotsday!

Do you know what...

MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

MEAN Stack – AngularJS...

Looking for the Latest Material Design Starter Series?

Quick overview for starting an Android App using Angular

Quick overview for starting an Android App using Angular

Jump, Pivot and Prioritise when your company is juggling multiple products

Jump, Pivot and Prioritise when your company is juggling multiple products

AngularJS Custom Actions for ExpressJS17:23

AngularJS Custom Actions for ExpressJS

MEAN Stack to Meteorjs – Server Side Email13:22

MEAN Stack to Meteorjs – Server Side Email

Make your MEAN Stack App a Meteorjs App23:50

Make your MEAN Stack App a Meteorjs App

MEAN Stack v.s Meteor – Similar but Different11:28

MEAN Stack v.s Meteor – Similar but Different

AngularJS Material Design Autocomplete12:59

AngularJS Material Design Autocomplete

AngularJS + Nodemailer Contact Form14:41

AngularJS + Nodemailer Contact Form

AngularJS Material Design Tabs, Forms & Toasts22:56

AngularJS Material Design Tabs, Forms & Toasts

Take back control of your -g NodeJS packages on Windows

Take back control of your -g NodeJS packages on Windows

Which JavaScript web framework should I use?

Which JavaScript web framework should I use?

Material Design Web App Thinking + MeteorJS & AngularJS 211:04

Material Design Web App Thinking + MeteorJS & AngularJS 2

3 Tips for your Material Design Wireframes04:05

3 Tips for your Material Design Wireframes

Designing a new web app from scratch05:06

Designing a new web app from scratch

MEAN Stack – Deploy to Azure07:25

MEAN Stack – Deploy to Azure

AngularJS Material Design Toolbar Tips and Tricks25:01

AngularJS Material Design Toolbar Tips and Tricks

AngularJS Material Design Side Project Sneak Peak04:23

AngularJS Material Design Side Project Sneak Peak

AngularJS Material Starter App in the Mean Stack

AngularJS Material Starter App in the Mean Stack

Design your Web Apps with Bootstrap Wireframes05:41

Design your Web Apps with Bootstrap Wireframes

AngularJS Material Design in your MEAN Stack12:01

AngularJS Material Design in your MEAN Stack

MEAN Stack 0.4.0 with vertical modules

Install MEAN.js 0.4.0 and run using Gulp10:09

Install MEAN.js 0.4.0 and run using Gulp

Create a vertical MEAN.js 0.4 crud module02:43

Create a vertical MEAN.js 0.4 crud module

MEAN.js Transition to 0.4 – Part 112:45

MEAN.js Transition to 0.4 – Part 1

MEAN.js Transition to 0.4 – Part 210:35

MEAN.js Transition to 0.4 – Part 2

Set up a free MongoDB database using Compose.io02:12

Set up a free MongoDB database using Compose.io

MEAN Stack – Side by Side with Version 0.4.013:02

MEAN Stack – Side by Side with Version 0.4.0

AngularJS Material Design in your MEAN Stack12:01

AngularJS Material Design in your MEAN Stack

AngularJS Material Starter App in the Mean Stack

AngularJS Material Starter App in the Mean Stack

Start the 30 Day Mean Stack Honolulu Challenge!

Quick overview for starting an Android App using Angular

Quick overview for starting an Android App using Angular

I'm really interested to see just how far the Angular Web/Mobile development experience has grown over the last few years.
Jump, Pivot and Prioritise when your company is juggling multiple products

Jump, Pivot and Prioritise when your company is juggling multiple products

As a kid, I played a lot of Netball. I even went on to coach and umpire. If you’re familiar
AngularJS Custom Actions for ExpressJS 17:23

AngularJS Custom Actions for ExpressJS

In this tutorial video we'll look at using AngularJS resource services to communicate between AngularJS and your ExpressJS controllers.
MEAN Stack to Meteorjs – Server Side Email 13:22

MEAN Stack to Meteorjs – Server Side Email

How can you take the server side of your expressJS based, Mean Stack app, and turn it into a Meteor
Make your MEAN Stack App a Meteorjs App 23:50

Make your MEAN Stack App a Meteorjs App

Lets take the Mean Stack angular material design app created in the AngularJs Material Starter series, and move the code
MEAN Stack v.s Meteor – Similar but Different 11:28

MEAN Stack v.s Meteor – Similar but Different

Been wondering how you can leverage your MEAN Stack and/or AngularJS knowledge to create Meteor Apps? So what is Meteor
AngularJS Material Design Autocomplete 12:59

AngularJS Material Design Autocomplete

In this tutorial video we'll get fancy with Autocomplete! We'll look at some sweet little tricks that you can use
AngularJS + Nodemailer Contact Form 14:41

AngularJS + Nodemailer Contact Form

In this tutorial video we'll create a working contact form! Each time a user sends a message using the contact
AngularJS Material Design Tabs, Forms & Toasts 22:56

AngularJS Material Design Tabs, Forms & Toasts

We'll pick this video up from the end of the AngularJS Material Design Toolbar Tips and Tricks and extend it
Take back control of your -g NodeJS packages on Windows

Take back control of your -g NodeJS packages on Windows

It can be really frustrating when setting up your Windows environment for NodeJS, with packages like Yo, Grunt, Bower etc
Which JavaScript web framework should I use?

Which JavaScript web framework should I use?

Ever felt like: OMG! Which web framework should I use? How do I know if I'm picking the right one?
Material Design Web App Thinking + MeteorJS & AngularJS 2 11:04

Material Design Web App Thinking + MeteorJS & AngularJS 2

We go behind the scenes with early designs for a Material Design Web App that I'm working on, and some
3 Tips for your Material Design Wireframes 04:05

3 Tips for your Material Design Wireframes

Here are 3 quick tips that will help you create beautiful Material Design Wire-frames, with templates, icons, and colour combinations.
Designing a new web app from scratch 05:06

Designing a new web app from scratch

I'll show you my approach to web design, with my first sketches for a new project that I'm working on.
MEAN Stack – Deploy to Azure 07:25

MEAN Stack – Deploy to Azure

In this video we'll look at: Nodejitsu is shutting down! We'll deploy a mean stack app to Azure. We'll look
AngularJS Material Design Toolbar Tips and Tricks 25:01

AngularJS Material Design Toolbar Tips and Tricks

We look through the AngularJS Material Design starter app, with tips and tricks for Toolbars: including, layout="row", layout="column", md-tall, tabs
AngularJS Material Design Side Project Sneak Peak 04:23

AngularJS Material Design Side Project Sneak Peak

I've been playing around with Angular Material a lot lately, and I've been really impressed with how easy it is
AngularJS Material Starter App in the Mean Stack

AngularJS Material Starter App in the Mean Stack

In this post, we'll take the angular material starter app discussed during ng-conf 2015, and apply it to a MEAN
Design your Web Apps with Bootstrap Wireframes 05:41

Design your Web Apps with Bootstrap Wireframes

In this video we'll look at how you can quickly and easily create professional looking wireframes using Adobe Illustrator, and
AngularJS Material Design in your MEAN Stack 12:01

AngularJS Material Design in your MEAN Stack

In this video we'll add the angular-material package to meanjs, and set up the mean stack to use the angular

Quick overview for starting an Android App using Angular
Jump, Pivot and Prioritise when your company is juggling multiple products
AngularJS Custom Actions for ExpressJS17:23
MEAN Stack to Meteorjs – Server Side Email13:22
Make your MEAN Stack App a Meteorjs App23:50
MEAN Stack v.s Meteor – Similar but Different11:28
AngularJS Material Design Autocomplete12:59
AngularJS + Nodemailer Contact Form14:41
AngularJS Material Design Tabs, Forms & Toasts22:56
Take back control of your -g NodeJS packages on Windows
Which JavaScript web framework should I use?
Material Design Web App Thinking + MeteorJS & AngularJS 211:04
3 Tips for your Material Design Wireframes04:05
Designing a new web app from scratch05:06
MEAN Stack – Deploy to Azure07:25
AngularJS Material Design Toolbar Tips and Tricks25:01
AngularJS Material Design Side Project Sneak Peak04:23
AngularJS Material Starter App in the Mean Stack
Design your Web Apps with Bootstrap Wireframes05:41
AngularJS Material Design in your MEAN Stack12:01

Already Built an App? Lets Deploy!

MEAN Stack – Prepare the Build Package for Deployment – Day 306:18

MEAN Stack – Prepare the Build Package for Deployment – Day 30

MEAN Stack – Deploy to Heroku – Day 30(i)6:21

MEAN Stack – Deploy to Heroku – Day 30(i)

MEAN Stack – Deploy to Digital Ocean16:16

MEAN Stack – Deploy to Digital Ocean

MEAN Stack – Deploy to Azure07:25

MEAN Stack – Deploy to Azure

Looking for an intro to functional design?

Web App development: how do you build a web app?

Web App development: how do you build a web app?

Analyse and Identify the Problem – Part 1

Analyse and Identify the Problem – Part 1

Business Processes and Workflows – Part 2

Business Processes and Workflows – Part 2

Business Goals, Feasibility and Fit Gap – Part 3

Business Goals, Feasibility and Fit Gap – Part 3

Behaviour Driven Requirements – Part 4

Behaviour Driven Requirements – Part 4

Use cases and storyboards – Part 5

Use cases and storyboards – Part 5

Functional Interaction Design – Part 6

Functional Interaction Design – Part 6

Bossable - From idea to boss, with fun and friendly tutorials and videos
  • © Bossable 2015
  • Tech
  • Mean Stack
  • Contact Us
  • Privacy
  • Terms
  • Close
  • Latest
  • Store
  • Mean Stack
  • 30 Day MEAN Stack Challenge
  • Web Apps
  • Tech
  • Say Hello