Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Firebase
0 likes1,513 views
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.
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Firebase
- 2. Guten Abend! 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. Community that’s helped me along @ladyleet Angular Bootcamp @angularbootcamp One Hungry Mind Training @simpulton Angular Master Class @pascalprecht The Ben Lesh @benlesh
- 9. Material Design Today I want 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 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 Using ngFor to display data Using the new router Deploying to firebase
- 12. Create angular-cli ng2 app @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 $ npm install -g angular-cli $ ng new {{name-of-app}} by andrew haskin @ladyleet
- 14. Create angular-cli ng2 app @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 $ npm install materialize-css by andrew haskin @ladyleet
- 16. Material Design add to your 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 ng2 app @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 ng2 app @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 ng2 app @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 ng2 app @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 ng2 app @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 ng2 app @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
- 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