This is from the AngularJS RTP meetup.

2. Good Evening!
made with keynote by andrew hask
@ladyleet

3. Material Design
How many of you are using Angular 2?
by andrew haskin
@ladyleet

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

5. Tracy Lee
@ladyleet
github.com/ladyleet
modern-web.org
medium.com/@ladyleet
@ladyleet

6. Entrepreneur
sold my startup Dishcrawl
Junior Developer
Playing with frameworks & JS
Traveling Entrepreneur
New company, #digitalnomad
Who Knows?
LYFE. #YOLO
@ladyleet
Bit About My Life

7. @ladyleet
Reason is Easy?
• Angular-CLI (thx ember-cli)
• Convention over configuration
• Scaling across larger teams
• Quicker ramp time

8. Material Design
Today I want to show you
- Building an Angular 2 Angular-CLI app
- Demo of newest new router
- Demo of template-driven forms
by andrew haskin
@ladyleet

9. @ladyleet
Latest Versions
Angular 2 : RC4
Router: 3.0.0 beta 2
Angular-CLI : 1.0.0 beta 11 webpack
Angular Forms: 0.2.0

10. @ladyleet
We’re prototyping the ng-tattoo app

11. 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

12. 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

13. Material Design
$ npm install angular-cli@webpack -g
$ npm install angular-cli@1.0.0-beta.11-webpack
go into your package.json and make sure there is no ^
in angular-cli devDependencies
$ ng new <name-of-app>
$ ng s
by andrew haskin
@ladyleet

14. 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

15. Material Design
$ npm install materialize-css
by andrew haskin
@ladyleet

16. 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

17. @ladyleet
Success Looks Like This
Font will change to material design standard font - Roboto

18. 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

19. @ladyleet
Angular 2 Angular-CLI Webpack App Structure
component based
.css
.html
.spec.ts
.ts
angular-cli webpack changes
no more angular-cli-build.js
no more system-config.ts)

20. 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. Material Design
Basic Component Generation
$ ng generate <component-name>
Shortcuts & Configurations
(use ng g - - help for full list)
$ ng g c -is -it - - nospec <component-name>
(generates component and adds inline style, inline template, and doesn’t
generate spec file)
by andrew haskin
@ladyleet

22. 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

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
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

26. 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

27. @ladyleet
Resources
Github starter repo: https://github.com/ladyleet/ngtattoo-ngexample
App on Firebase: https://ng2-rdu.firebaseapp.com/
Post: How to use materialize-css with Angular 2
https://medium.com/@ladyleet/using-materializecss-with-your-angular-2-angular-cli-
app-2eb64b05a1d2#.28mbpguuv
Post: Using Angular 2’s new router
https://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
Post: How to use template-driven forms
https://medium.com/@ladyleet/getting-started-using-angular-2-forms-with-
angular-2-99b468b4f045#.mxmqt58eg
Tracy Lee
@ladyleet
github.com/ladyleet
modern-web.org
medium.com/@ladyleet

28. made with keynote
Thank you!
@ladyleet