Bossable.com: Intro to AngularJS Material Design Tabs, Forms & Toasts

I often get asked about Tab tutorials. It used to be Tabs in Angular-UI, but now, it's more about how people can use Tabs in AngularJS Material Design https://material.angularjs.org/#/

The AngularJS Material Design team have mentioned that Tabs have been heavily re-factored in the upcoming version 0.9. So I'm going to test it out, and have a play with a few other Material Design directives.

The code in this video is based on 0.8.x and will be updated when 0.9 is released.

We'll pick this video up from the end of the AngularJS Material Design Toolbar Tips and Tricks http://www.bossable.com/1338/angular-material-design-toolbar-examples/ post were we looked at creating different types of toolbars (amongst other things) using AngularJS Material Design.

In this video, we're going to extend that out further.

- When we select a Tab, the content area should change, using Angular ui-router
- When a page is refreshed, the relevant Tab for the view should be highlighted
- In the new 'Tab 2', we'll add a Material Design form
- Lastly, we'll display a Toast when the new form is submitted

Get the code here: http://www.bossable.com/1745/angularjs-material-design-contact-form

Also check out my 30 Day MEAN Stack Challenge - videos on YouTube everyday for 30 days to create a MEAN.js App - videos are up on http://www.bossable.com

---

Playlist - https://www.youtube.com/playlist?list=PL6rhBJX0L3TWYrwrQIi1_MzQDvVhkUVPI

------
Subscribe: http://youtube.com/c/Bossable?sub_confirmation=1
Facebook: https://www.facebook.com/pages/Bossable/1681997998694376
Google+: https://www.google.com/+Bossable
Twitter: https://twitter.com/ShristiSharma_
About & Contact: http://www.bossable.com/say-hello/