creating bananajs with angular 2, angular cli, and material design
TRANSCRIPT
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
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
@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
