Here are 3 quick tips that will help you create beautiful Material Design Wire-frames, with templates, icons, and colour combinations.
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 continue setting up our Update Customer Modal instance using Angular UI. We’ll focus on the buttons within the Modal to trigger the update function, save the data and close the Modal window, or cancel out of the Modal window.
We look at:
– A recap of our Angular UI Customer Update Modal
– Locating the ‘ok’ and ‘cancel’ functions from the Angular UI documentation
– Adding the ‘ok’ and ‘cancel’ functions to the Update Modal instance
– Aligning our button details to our wireframes
– Adding the update function to the Customers Update Controller
– Adding a reference to the update function from the Update Modal
– Testing out our Model by updating customer details
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
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 […]
I’ve been getting a few questions on how to go about adding external/custom modules to a MEAN Stack app. If the module is vanilla JavaScript, it’ll need some additional work to create one or more directives, but assuming you have an Angular module, such as one from this site: http://ngmodules.org/, then the process is fairly […]
In this video we’ll use the yeoman generator to create new Angular.js Controller and test files.
A context diagram is a great place to start exploring. It lets us look at a problem from the outside, and peel away the layers until we get to the core. This is a great way to understand how a business interacts with the entities that live outside of it.
30 jam packed videos with something that you can do with your MEAN Stack app, in less than 15 minutes. A great example and tutorial challenge for anyone new to the mean stack.
In this video we’ll use the yeoman generator to create a new Angular.js directive.
In this video we’ll look at how you can quickly and easily create professional looking wireframes using Adobe Illustrator, and free bootstrap vector graphic templates and vector icons.
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