7. Entrepreneur
sold my startup Dishcrawl
Junior Developer
Playing with frameworks & JS
Traveling Entrepreneur
New company, #digitalnomad
Who Knows?
#YOLO
@ladyleet
Bit About My Life
8. @ladyleet
Reason is Easy?
• Angular-CLI (thx ember-cli)
• Convention over configuration
• Scaling across larger teams
• Quicker ramp time
9. 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
12. 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
13. 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
15. 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
17. 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
19. 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
21. 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
22. 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
23. 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
24. 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
25. 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
26. 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
27. 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
29. @ladyleet
Resources
Github starter repo: https://github.com/ladyleet/bananajs
Post: Using the new release of Angular 2’s router
https://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