AngularJS RTP Slides - Angular 2 Demo #ngtattoo with Angular CLI, Newest New Router, Forms
0 likes426 views
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 with keynote by andrew hask @ladyleet
- 3. Material Design How many of you are using Angular 2? by andrew haskin @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 [email protected] 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