using angular-cli to deploy an angular 2 app using firebase in 30 minutes
TRANSCRIPT
Dzień Dobry!made with keynote by andrew hask
@ladyleet
made with keynote
@ladyleet
Have y’all ever experienced The Chimichanga?
https://www.youtube.com/watch?v=PUG5AqBD3T4
Material DesignWe’re going to have our own way of getting
warmed up.by andrew haskin
@ladyleet
@ladyleethttps://www.youtube.com/watch?v=f10SEuEo6HI
Karaoke
@ladyleet
KaraokeCoders 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
Material DesignHope you all are warmed up now and ready to
learn some Angular 2 with Angular CLI!by andrew haskin
@ladyleet
Material DesignHow many of you are using Angular 2?by andrew haskin
@ladyleet
Material DesignHow many of you are using Angular CLI?by andrew haskin
@ladyleet
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
@ladyleet
Material DesignWe’re going to walk through a few thingsby andrew haskin
@ladyleet
Material Design
We’re going to walk through a few things
- Why the Angular-CLI is so important
by andrew haskin
@ladyleet
Material Design
We’re going to walk through a few things
- Easy implementation of material design
by andrew haskin
@ladyleet
Material Design
We’re going to walk through a few things
- Building an Angular 2 Angular-CLI app
by andrew haskin
@ladyleet
Material Design
We’re going to walk through a few things
- Component structure
by andrew haskin
@ladyleet
Material Design
We’re going to walk through a few things
- Using the newest new router
by andrew haskin
@ladyleet
Material Design
We’re going to walk through a few things
- Template driven forms
by andrew haskin
@ladyleet
Material Design
We’re going to walk through a few things
- Deploying your site to Firebase
by andrew haskin
@ladyleet
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
Material DesignWhy the CLI is so importantby andrew haskin
@ladyleet
@ladyleet
Why the CLI is so important
made with keynote
Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production
@ladyleet
Setting up your dev environment
made with keynote
Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production
@ladyleet
Setting up your dev environment
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!
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
Material DesignAnd that’s why the CLI is so importantby andrew haskin
@ladyleet
Material DesignNow, let’s build an app!by andrew haskin
@ladyleet
@ladyleet
We’re prototyping the ng-cruise site
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
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
Material Design
$ npm install -g angular-cli@latest
$ ng new <name-of-app>
$ ng s
@ladyleet
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
Material Design$ npm install materialize-cssby andrew haskin
@ladyleet
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
@ladyleet
Success Looks Like This
Font will change to material design standard font - Roboto
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
@ladyleet
Angular 2 Angular-CLI Webpack App Structure
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
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
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
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
@ladyleet
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
made with keynoteThank you!
@ladyleet
