Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
1 like861 views
The document is a presentation by Andrew Haskin about using Angular 2 with Angular CLI, emphasizing its importance and ease of use. It outlines the process of building an Angular app, implementing Material Design, and deploying to Firebase, alongside various features of the CLI. The presentation includes steps for configuring the development environment and generating components.
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
- 2. Dzień Dobry! made with keynote by andrew hask @ladyleet
- 3. made with keynote @ladyleet Have y’all ever experienced The Chimichanga? https://www.youtube.com/watch?v=PUG5AqBD3T4
- 4. Material Design We’re going to have our own way of getting warmed up. by andrew haskin @ladyleet
- 6. @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
- 7. Material Design Hope you all are warmed up now and ready to learn some Angular 2 with Angular CLI! by andrew haskin @ladyleet
- 8. Material Design How many of you are using Angular 2? by andrew haskin @ladyleet
- 9. Material Design How many of you are using Angular CLI? by andrew haskin @ladyleet
- 11. Material Design We’re going to walk through a few thingsby andrew haskin @ladyleet
- 12. Material Design We’re going to walk through a few things - Why the Angular-CLI is so important by andrew haskin @ladyleet
- 13. Material Design We’re going to walk through a few things - Easy implementation of material design by andrew haskin @ladyleet
- 14. Material Design We’re going to walk through a few things - Building an Angular 2 Angular-CLI app by andrew haskin @ladyleet
- 15. Material Design We’re going to walk through a few things - Component structure by andrew haskin @ladyleet
- 16. Material Design We’re going to walk through a few things - Using the newest new router by andrew haskin @ladyleet
- 17. Material Design We’re going to walk through a few things - Template driven forms by andrew haskin @ladyleet
- 18. Material Design We’re going to walk through a few things - Deploying your site to Firebase by andrew haskin @ladyleet
- 19. 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
- 20. Material Design Why the CLI is so important by andrew haskin @ladyleet
- 21. @ladyleet Why the CLI is so important
- 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. made with keynote Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production @ladyleet Setting up your dev environment
- 24. 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!
- 25. 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
- 26. Material Design And that’s why the CLI is so important by andrew haskin @ladyleet
- 27. Material Design Now, let’s build an app! by andrew haskin @ladyleet
- 28. @ladyleet We’re prototyping the ng-cruise site
- 29. 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
- 30. 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
- 31. Material Design $ npm install -g angular-cli@latest $ ng new <name-of-app> $ ng s @ladyleet
- 32. 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
- 33. Material Design $ npm install materialize-css by andrew haskin @ladyleet
- 34. 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
- 35. @ladyleet Success Looks Like This Font will change to material design standard font - Roboto
- 36. 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
- 37. @ladyleet Angular 2 Angular-CLI Webpack App Structure
- 38. 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
- 39. 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
- 40. 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
- 41. 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
- 43. made with keynote Thank you! @ladyleet