Download to read offline
Uploaded byTracy Lee
AngularJS RTP Slides - Angular 2 Demo #ngtattoo with Angular CLI, Newest New Router, Forms
The document discusses setting up an Angular 2 application using Angular-CLI with Material Design. It covers initializing a new project with Angular-CLI, installing and configuring Materialize CSS for styling, generating components, and using features like routing and template-driven forms. It also provides resources for learning more including the speaker's blog posts and starter code repository.
AngularJS RTP Slides - Angular 2 Demo #ngtattoo with Angular CLI, Newest New Router, Forms
- 2. Good Evening! made withkeynote by andrew hask @ladyleet
- 3. Material Design How manyof you are using Angular 2? by andrew haskin @ladyleet
- 4.
- 5.
- 6. Entrepreneur sold my startupDishcrawl 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 Iwant 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 theng-tattoo app
- 11. Create angular-cli ng2app @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 ng2app @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 $ npminstall 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 ng2app @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 $ npminstall materialize-css by andrew haskin @ladyleet
- 16. Material Design add toyour 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 LikeThis Font will change to material design standard font - Roboto
- 18. Create angular-cli ng2app @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-CLIWebpack 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 ng2app @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 ComponentGeneration $ 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 ng2app @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 ng2app @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 ng2app @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 ng2app @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 helpedme 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 Thankyou! @ladyleet