Guten Abend!made with keynote by andrew hask

@ladyleet

Material DesignHow many of you are using Angular 2?by andrew haskin

@ladyleet

@ladyleethttps://www.youtube.com/watch?v=1NXhOChi54U

Tracy Lee

@ladyleet github.com/ladyleet

modern-web.org medium.com/@ladyleet

@ladyleet

Entrepreneursold my startup Dishcrawl

Junior DeveloperPlaying with frameworks & JS

Traveling EntrepreneurNew company, #digitalnomad

Who Knows?LYFE. #YOLO

@ladyleet

Bit About My Life

@ladyleet

Reason is Easy?

• Angular-CLI (thx ember-cli) • Convention over configuration

• Scaling across larger teams • Quicker ramp time

Community that’s helped me along

@ladyleet

Angular Bootcamp@angularbootcamp

One Hungry Mind Training@simpulton

Angular Master Class@pascalprecht

The Ben Lesh@benlesh

Material Design

Today I want to show you how easy it is to build an Angular 2 app

with Angular CLI on the fly.

by andrew haskin

@ladyleet

@ladyleet

We’re prototyping the ng-tattoo app

Create angular-cli ng2 app

@ladyleet

Here’s the journey we’re about to take

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Create angular-cli ng2 app

@ladyleet

Angular 2

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Material Design

$ npm install -g angular-cli

$ ng new {{name-of-app}}

by andrew haskin

@ladyleet

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Angular 2

Material Design$ npm install materialize-cssby andrew haskin

@ladyleet

Material Design

add to your angular-cli-build.js file ‘materialize-css/bin/materialize.css’ ‘materialize-css/bin/materialize.js’

add to your index.html file <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/

jquery.js"></script>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css”>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

by andrew haskin

@ladyleet

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Angular 2

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Angular 2

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Angular 2

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Angular 2

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

Angular 2

Create angular-cli ng2 app

@ladyleet

What we’ve learned today

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Using ngFor to display data

Using the new router

Deploying to firebase

made with keynoteDanke!

@ladyleet

ResourcesGithub starter repo: https://github.com/ladyleet/ngtattoo-ngexample

App on Firebase: https://ngtattooexample.firebaseapp.com/

Slides: http://www.slideshare.net/ladyleet

Post: How to use materialize-css with Angular 2https://medium.com/@ladyleet/using-materializecss-with-your-angular-2-angular-cli-app-2eb64b05a1d2#.28mbpguuv

Post: Using Angular 2’s new routerhttps://medium.com/@ladyleet/using-angular-2s-brand-new-router-a868fdc23503#.ubyiddj7n

Post: Displaying data using ngFor https://medium.com/@ladyleet/displaying-data-with-the-ngfor-directive-in-your-angular-2-app-1b72cab1121e#.vpiznb2bi

Tracy Lee

@ladyleet github.com/ladyleet

modern-web.org medium.com/@ladyleet