Creating BananaJS with Angular 2, Angular CLI, and Material Design

Good Evening!made with keynote by andrew hask

@ladyleet

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

@ladyleet

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

@ladyleet

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

Tracy Lee

@ladyleet github.com/ladyleet

modern-web.org medium.com/@ladyleet

@ladyleet

Entrepreneur sold my startup Dishcrawl

Junior DeveloperPlaying with frameworks & JS

Traveling Entrepreneur New company, #digitalnomad

Who Knows? #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

Material Design

Today I want to show you

- Building an Angular 2 Angular-CLI app - Demo of newest new router - Using template driven forms - Using Firebase to deploy & host

by andrew haskin

@ladyleet

@ladyleet

Latest Versions

Angular 2 : Final!

Router: 3.0.0

Angular-CLI : 1.0.0 beta 15

@ladyleet

We’re prototyping the bananaJS 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

Deploying to Firebase

Template-driven forms

Using the new router

Create angular-cli ng2 app

@ladyleet

Angular 2

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Deploying to Firebase

Template-driven forms

Using the new router

Material Design

$ npm install angular-cli

$ ng new <name-of-app>

$ ng s

@ladyleet

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Angular 2

Deploying to Firebase

Template-driven forms

Using the new router

Material Design$ npm install materialize-cssby andrew haskin

@ladyleet

Material Design

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

@ladyleet

Success Looks Like This

Font will change to material design standard font - Roboto

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Angular 2

Deploying to Firebase

Template-driven forms

Using the new router

@ladyleet

Angular 2 Angular-CLI Webpack App Structure component based.css .html .spec.ts .ts

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Angular 2

Deploying to Firebase

Template-driven forms

Using the new router

Material Design

Basic Component Generation $ ng generate <component-name>

Shortcuts & Configurations (use ng g - - help for full list)

$ ng g c -is -it - - no-spec <component-name> (generates component and adds inline style, inline template, and doesn’t

generate spec file)

by andrew haskin

@ladyleet

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Angular 2

Deploying to Firebase

Template-driven forms

Using the new router

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Angular 2

Deploying to Firebase

Template-driven forms

Using the new router

Create angular-cli ng2 app

@ladyleet

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Angular 2

Deploying to Firebase

Template-driven forms

Using the new router

Create angular-cli ng2 app

@ladyleet

What we’ve learned today

Configure materialize-css

Ng2 ng-cli app structure

Creating components

Deploying to Firebase

Template-driven forms

Using the new router

Community that’s helped me along

@ladyleet

Angular Bootcamp@angularbootcamp

One Hungry Mind Training@simpulton

Angular Master Class@pascalprecht

The Ben Lesh@benlesh

Deborah Kurata@deborahkurata

Sean Larkin@thelarkinn

Mike Brocchi@brocco

made with keynote

@ladyleetangularconnect.com

@ladyleet

Resources

Github starter repo: https://github.com/ladyleet/bananajs

Post: Using the new release of Angular 2’s routerhttps://medium.com/@ladyleet/figured-this-would-help-yall-a-bit-if-i-walked-through-it-72910e1497e#.stfat5rpl

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

made with keynoteThank you!

@ladyleet