As a kid, I played a lot of Netball. I even went on to coach and umpire. If you’re familiar with Netball, you’ll know that there is a classic Netball move which allows you to swivel on your landing foot and change direction, this move is called a ‘Pivot’. It may have been all of […]
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
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.
In this video we’ll use the yeoman generator to create a new Angular.js directive.
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.
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.
In this video we’ll create a vertical module for MEAN.js 0.4 using the yeoman meanjs generator!
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
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 post, we’ll take the angular material starter app discussed during ng-conf 2015, and apply it to a MEAN Stack App.
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
In this video we’ll use the yeoman generator to create a new Angular.js factory service.