Angular in a Material World

Building Material Design into you Angular Apps with Angular Material.

Created by Nicholas Mackey

Web: nmackey.com / Twitter: @nicholas_mackey / Github: nmackey

Outline

  • Material Design
  • Angular Material
  • How to get Started
  • Code Examples
  • Lessons Learned

What is Material Design?

  • Unveiled in 2014 at Google I/O
  • Google's push to make design more of a central feature of android and it's business.

What is Material Design?

Set of design principles for applications based on physical principles of paper and ink combined with science and technology.

material/paper elements (polymer)

Environment

The material environment is a 3D space, which means all objects have x, y, and z dimensions.

Material properties

Material has varying x & y dimensions with a uniform thickness (1dp).

Elevation and Shadows

Shadows result naturally from the realtive elevation between material elements.

More...

Animation

Style

Componenets

Patterns

Usability

What is Angular Material?

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

Widgets, grid, styles, etc.

Similar to a bootstrap or foundation.

caniuse?

  • Browser Support (n-1)
  • Angular 1.3.x or higher
  • Not quite ready for prime time (pre 1.0)
  • 1.0 targeted for early fall

Highlights

  • Themes
  • Grid (Flexbox)
  • Input Elements
  • Accessibility
  • Touch Support

Where do I start?

Bower

NPM

Github

Flexbox

Review flexbox b/c angular material's grid system is based on it.

Nice Guide

Angular Gulp Generator

Yeoman generator that will bootstrap an app for you with Angular Material.

Examples

We are going to setup angular material app for viewing and submitting talk proposals.

  • Generator
  • Navigation
  • Font Icons
  • Lists & Forms
  • Themes
  • Accessibility

What I learned

Good

  • Supported by google
  • Uses Flexbox
  • Pretty
  • Not bootstrap

Bad

  • Not ready yet (pre 1.0 & performance issues)
  • Still missing a few things...maybe
  • Some widgets don't play well together (toolbar & tabs)
  • Missing some documentation (styling, options, services)

Q & A?

THE END

Presentation online at nmackey.com/presentation-angular-material/ Examples online at github.com/nmackey/presentation-angular-material-examples Slides available at github.com/nmackey/presentation-angular-material