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
GitHub: has millions of public and private repositories, with thousands more being added everyday. GitHub repositories or ‘repos’, are used as a collaborative means of source control. Github allows a granular level of change control and code management. This means that code changes can be clearly identified, issues can be addressed, and new features can be requested, all in one place.
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.
I’ve been using the MEAN stack for quite some time now (MEAN is a web app stack which consists of MongoDB, Express, Angular, Node). In the last few months, the stack, predominately the ‘A’ (Angular.js) part of the stack has gone through a process of transition. This has been a bit of an awkward time […]
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
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 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 go through an introduction to using Angular UI, and using Angular UI directives in place of Bootstrap JavaScript components. We also start to set-up our ‘Update Customer’ Modal window.
We look at:
– Using Angular UI Bootstrap for JavaScript Bootstrap components
– When custom directives would be used to include vanilla JavaScript to an Angular App
– An Introduction to Angular UI: http://angular-ui.github.io/bootstrap/
– Working through an example of Angular UI for modal windows
– How the Angular UI modal examples ties back to the example code
– Including Angular UI model code back in our app to create an Update Customer Modal
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
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.
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.
I’m really interested to see just how far the Angular Web/Mobile development experience has grown over the last few years. So, let’s get into the nitty gritty of starting an Android app using Angular.