Downloaded 16 times
Uploaded byTracy Lee
Creating BananaJS with Angular 2, Angular CLI, and Material Design
The document is a presentation slide deck about building applications with Angular 2 and Angular CLI. It discusses configuring Materialize CSS, generating components, deploying to Firebase, using template-driven forms, and the new Angular router. The presentation provides steps to create an Angular CLI project, add Materialize CSS, generate components, and deploy the application to Firebase. It also lists additional learning resources and community members that can provide help.
Creating BananaJS with Angular 2, Angular CLI, and Material Design
- 2. Good Evening! made withkeynote by andrew hask @ladyleet
- 3. Material Design How manyof you are using Angular 2? by andrew haskin @ladyleet
- 4. Material Design How manyof you are using Angular CLI? by andrew haskin @ladyleet
- 5.
- 6.
- 7. Entrepreneur sold my startupDishcrawl 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 Iwant 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
- 10. @ladyleet Latest Versions Angular 2: Final! Router: 3.0.0 Angular-CLI : 1.0.0 beta 15
- 11. @ladyleet We’re prototyping thebananaJS app
- 12. 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
- 13. 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
- 14. Material Design $ npminstall angular-cli $ ng new <name-of-app> $ ng s @ladyleet
- 15. 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
- 16. Material Design $ npminstall materialize-css by andrew haskin @ladyleet
- 17. 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
- 18. @ladyleet Success Looks LikeThis Font will change to material design standard font - Roboto
- 19. 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
- 20. @ladyleet Angular 2 Angular-CLIWebpack App Structure component based .css .html .spec.ts .ts
- 21. 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
- 22. Material Design Basic ComponentGeneration $ 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 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 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 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
- 27. 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
- 28.
- 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
- 30. made with keynote Thankyou! @ladyleet