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/
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
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
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
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
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
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
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