Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes

746 views

Published on

Do you think it’s possible to live code an Angular 2 app, create a backend, and deploy it in one talk? With the convenience of Angular-CLI and a little help from Firebase and material design, see how easy it is to create apps with Angular 2 and why this new framework is the great for quickly prototyping ideas and is built to scale large applications across distributed teams.

Example repo with completed branches - https://github.com/ladyleet/ngcruise-up
Deployed App - https://ngpoland-d7d54.firebaseapp.com/

Published in: Technology
  • Be the first to comment

Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes

  1. 1. Dzień Dobry! made with keynote by andrew hask @ladyleet
  2. 2. made with keynote @ladyleet Have y’all ever experienced The Chimichanga? https://www.youtube.com/watch?v=PUG5AqBD3T4
  3. 3. Material Design We’re going to have our own way of getting warmed up. by andrew haskin @ladyleet
  4. 4. @ladyleethttps://www.youtube.com/watch?v=f10SEuEo6HI Karaoke
  5. 5. @ladyleet Karaoke Coders coding Angular 2 Using the CLI and Rx too  Trying to get their call stacks right  It goes on and on, and on, and on  Strangers coding  Up and down the boulevard Their webpack building in the night Website, Mobile Server side rendering Universal
  6. 6. Material Design Hope you all are warmed up now and ready to learn some Angular 2 with Angular CLI! by andrew haskin @ladyleet
  7. 7. Material Design How many of you are using Angular 2? by andrew haskin @ladyleet
  8. 8. Material Design How many of you are using Angular CLI? by andrew haskin @ladyleet
  9. 9. Tracy Lee @ladyleet github.com/ladyleet modern-web.org medium.com/@ladyleet @ladyleet
  10. 10. Material Design We’re going to walk through a few thingsby andrew haskin @ladyleet
  11. 11. Material Design We’re going to walk through a few things - Why the Angular-CLI is so important by andrew haskin @ladyleet
  12. 12. Material Design We’re going to walk through a few things - Easy implementation of material design by andrew haskin @ladyleet
  13. 13. Material Design We’re going to walk through a few things - Building an Angular 2 Angular-CLI app by andrew haskin @ladyleet
  14. 14. Material Design We’re going to walk through a few things - Component structure by andrew haskin @ladyleet
  15. 15. Material Design We’re going to walk through a few things - Using the newest new router by andrew haskin @ladyleet
  16. 16. Material Design We’re going to walk through a few things - Template driven forms by andrew haskin @ladyleet
  17. 17. Material Design We’re going to walk through a few things - Deploying your site to Firebase by andrew haskin @ladyleet
  18. 18. Material Design We’re going to walk through a few things - Why the Angular-CLI is so important - Easy implementation of material design - Building an Angular 2 Angular-CLI app - Component structure - Using the newest new router - Template driven forms - Deploying your site to Firebase by andrew haskin @ladyleet
  19. 19. Material Design Why the CLI is so important by andrew haskin @ladyleet
  20. 20. @ladyleet Why the CLI is so important
  21. 21. made with keynote Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production @ladyleet Setting up your dev environment
  22. 22. made with keynote Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production @ladyleet Setting up your dev environment
  23. 23. made with keynote Architect application Conventions of application Compiler for ES6 Live reload / dev server Testing Staging Production @ladyleet Angular-CLI does it for you! App structure same for every app Follows community conventions TypeScript Out of the box! Creates tests for you! Out of the box! Out of the box!
  24. 24. made with keynote A short list of the awesome (there’s more) @ladyleet Tree shaking Route generation (coming) Component generation Model generation Tests Sass/less support Package.json
  25. 25. Material Design And that’s why the CLI is so important by andrew haskin @ladyleet
  26. 26. Material Design Now, let’s build an app! by andrew haskin @ladyleet
  27. 27. @ladyleet We’re prototyping the ng-cruise site
  28. 28. 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 Template-driven forms Using the new router Deploying to Firebase
  29. 29. Create angular-cli ng2 app @ladyleet Angular 2 Configure materialize-css Ng2 ng-cli app structure Creating components Template-driven forms Using the new router Deploying to Firebase
  30. 30. Material Design $ npm install -g angular-cli@latest $ ng new <name-of-app> $ ng s @ladyleet
  31. 31. Create angular-cli ng2 app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Angular 2 Template-driven forms Using the new router Deploying to Firebase
  32. 32. Material Design $ npm install materialize-css by andrew haskin @ladyleet
  33. 33. 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
  34. 34. @ladyleet Success Looks Like This Font will change to material design standard font - Roboto
  35. 35. 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
  36. 36. @ladyleet Angular 2 Angular-CLI Webpack App Structure
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. Create angular-cli ng2 app @ladyleet What we’ve learned today with the CLI Configure materialize-css Ng2 ng-cli app structure Creating components Template-driven forms Using the new router Deploying to Firebase
  41. 41. @ladyleet Tracy Lee @ladyleet github.com/ladyleet modern-web.org medium.com/@ladyleet
  42. 42. made with keynote Thank you! @ladyleet

×