Download as PDF, PPTX
Uploaded byTracy Lee
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Firebase
The document is a presentation by Andrew Haskin about building Angular 2 applications using Angular CLI and Material Design. It covers the process of creating an Angular app, configuring Materialize CSS, and deploying to Firebase, along with relevant resources and links. It emphasizes ease of development and the advantages of using Angular CLI for large-scale projects.
More Related Content
Similar to Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Firebase
![Inclusive Architecture - Introducing the PAMstack - [Refactr.tech]](https://cdn.slidesharecdn.com/ss_thumbnails/refactr-190614202717-thumbnail.jpg?width=640&height=640&fit=bounds)
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Firebase
- 2. Guten Abend! 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. Community that’s helpedme along @ladyleet Angular Bootcamp @angularbootcamp One Hungry Mind Training @simpulton Angular Master Class @pascalprecht The Ben Lesh @benlesh
- 9. Material Design Today Iwant to show you how easy it is to build an Angular 2 app with Angular CLI on the fly. by andrew haskin @ladyleet
- 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 Using ngFor to display data Using the new router Deploying to firebase
- 12. Create angular-cli ng2app @ladyleet Angular 2 Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase
- 13. Material Design $ npminstall -g angular-cli $ ng new {{name-of-app}} by andrew haskin @ladyleet
- 14. Create angular-cli ng2app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase Angular 2
- 15. Material Design $ npminstall materialize-css by andrew haskin @ladyleet
- 16. Material Design add toyour angular-cli-build.js file ‘materialize-css/bin/materialize.css’ ‘materialize-css/bin/materialize.js’ 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. Create angular-cli ng2app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase Angular 2
- 18. Create angular-cli ng2app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase Angular 2
- 19. Create angular-cli ng2app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase Angular 2
- 20. Create angular-cli ng2app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase Angular 2
- 21. Create angular-cli ng2app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase Angular 2
- 22. Create angular-cli ng2app @ladyleet What we’ve learned today Configure materialize-css Ng2 ng-cli app structure Creating components Using ngFor to display data Using the new router Deploying to firebase
- 23.
- 24. @ladyleet Resources Github starter repo:https://github.com/ladyleet/ngtattoo-ngexample App on Firebase: https://ngtattooexample.firebaseapp.com/ Slides: http://www.slideshare.net/ladyleet 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 Tracy Lee @ladyleet github.com/ladyleet modern-web.org medium.com/@ladyleet