1 of 23

Naomi Black

Thomas Burleson

Build a Material App

2 of 23

who we are

3 of 23

what should we build

4 of 23

5 of 23

  • Plan your layout & the components
  • Add Angular Material and dependencies

  • Use hard-coded HTML & mock content
  • Wire components to your application logic

  • Add Responsive breakpoints
  • Confirm ARIA compliance

6 of 23

let’s write some live code

7 of 23

Plan your layout & the components

8 of 23

ok, now can we write code?

9 of 23

Step 1: Add Angular Material + Deps

  • Use Bower (or NPM to install)
  • Use <script> to load JS
  • Use <link> to load CSS
  • Configure Angular Material dep

10 of 23

Step 2: Build the wireframe

  • Create four container elements
  • Use the Layout API to position them
  • Configure component defaults!

11 of 23

Step 3: Mock the content

  • Add your components to the layout
  • Button and List use static text
  • Icon is using a static image URL

12 of 23

  • Add Angular Material and dependencies
  • Plan your layout & the components

  • Use components with mock content
  • Wire components to your application logic

  • Add Responsive breakpoints
  • Confirm ARIA compliance and e2e test

13 of 23

Step 4: Integrate your application logic

  • Define your data model and controllers
  • Define a module for your app
  • Register for DI

14 of 23

Step 4: Hook Angular into your UI

  • Use dynamic HTML to be compiled by Angular
  • Register icon set
  • Add `click` handlers for the buttons

15 of 23

Step 5: Add Responsive Layouts

  • Use Responsive triggers to hide/show the SideNav
  • Use Responsive trigger to hide/show then menu button.

16 of 23

Step 6: Fix ARIA Warnings

  • Resolve icon-buttons that are not accessible

17 of 23

18 of 23

ok. what about ES6?

19 of 23

A Tale of Two Tutorials

http://bit.ly/1wM1PEH

http://bit.ly/18o8M2S

20 of 23

ok. what next?

21 of 23

22 of 23

23 of 23

Thank you!