Creating BananaJS with Angular 2, Angular CLI, and Material Design
2 likes542 views
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 with keynote by andrew hask @ladyleet
- 3. Material Design How many of you are using Angular 2? by andrew haskin @ladyleet
- 4. Material Design How many of you are using Angular CLI? by andrew haskin @ladyleet
- 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
- 10. @ladyleet Latest Versions Angular 2 : Final! Router: 3.0.0 Angular-CLI : 1.0.0 beta 15
- 11. @ladyleet We’re prototyping the bananaJS app
- 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
- 14. Material Design $ npm install angular-cli $ ng new <name-of-app> $ ng s @ladyleet
- 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
- 16. Material Design $ npm install materialize-css by andrew haskin @ladyleet
- 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
- 18. @ladyleet Success Looks Like This Font will change to material design standard font - Roboto
- 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
- 20. @ladyleet Angular 2 Angular-CLI Webpack App Structure component based .css .html .spec.ts .ts
- 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
- 30. made with keynote Thank you! @ladyleet