The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
-
Upload
matt-raible -
Category
Technology
-
view
78 -
download
1
Transcript of The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
![Page 1: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/1.jpg)
#DevoxxUK
Getting Started with
Matt Raible • @mraible
![Page 2: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/2.jpg)
Blogger on raibledesigns.com
Java Champion and Web Developer
Father, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus LoverOkta Developer Advocate
![Page 3: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/3.jpg)
![Page 4: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/4.jpg)
#DevoxxUK
Authentication Standards
![Page 5: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/5.jpg)
My Angular Journey
![Page 6: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/6.jpg)
#DevoxxUK
Jobs on LinkedIn (US)April 2017
0
2,000
4,000
6,000
8,000
Backbone AngularJS Ember Knockout React Vue
![Page 7: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/7.jpg)
#DevoxxUK
Jobs on LinkedIn (US)April 2017
0
3,500
7,000
10,500
14,000
Backbone Angular Ember Knockout React Vue
![Page 8: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/8.jpg)
#DevoxxUK
Stack Overflow TagsApril 2017
0
75,000
150,000
225,000
300,000
Backbone Angular Knockout Ember React
![Page 9: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/9.jpg)
#DevoxxUK
Google Trends - Angular
![Page 10: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/10.jpg)
#DevoxxUK
Google Trends - Angular 2
![Page 11: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/11.jpg)
#DevoxxUK
Google Trends - Angular 4
![Page 12: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/12.jpg)
![Page 13: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/13.jpg)
Who wants to learn ?
![Page 14: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/14.jpg)
#DevoxxUK
Hello World with AngularJS
<!doctype html> <html ng-app> <head> <title>Hello World</title> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter a name here"> <hr> <h1>Hello {{name}}!</h1> </div> <script src="http://code.angularjs.org/1.5.8/angular.min.js"></script> </body> </html>
![Page 15: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/15.jpg)
![Page 16: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/16.jpg)
#DevoxxUK
Hello World with Angular <!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>
<body> <my-app>Loading AppComponent content here ...</my-app> </body> </html>
![Page 17: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/17.jpg)
#DevoxxUK
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
![Page 18: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/18.jpg)
#DevoxxUK
app/app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
![Page 19: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/19.jpg)
#DevoxxUK
app/app.component.ts
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
![Page 20: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/20.jpg)
#DevoxxUK
Angular 2+ Choices
Choose a language
JavaScript (ES6 or ES5)
TypeScript
Dart
Anything that transpiles to JS
Setup dev environment
Install Node
Choose Package Manager
Choose Module Loader
Choose Transpiler
Choose Build Tool
![Page 21: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/21.jpg)
#DevoxxUK
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org TSES7 ES6 ES5
![Page 22: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/22.jpg)
#DevoxxUK
TypeScript$ npm install -g typescript
function greeter(person: string) { return "Hello, " + person;} var user = "Jane User"; document.body.innerHTML = greeter(user);
$ tsc greeter.ts
https://www.typescriptlang.org/docs/tutorial.html
![Page 23: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/23.jpg)
#DevoxxUK
bus.ts
![Page 24: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/24.jpg)
#DevoxxUK
Get Started with Angular
Angular QuickStart
https://angular.io/docs/ts/latest/quickstart.html
Angular Seed
https://github.com/mgechev/angular-seed
Angular Seed Advanced
https://github.com/NathanWalker/angular-seed-advanced
![Page 25: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/25.jpg)
![Page 26: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/26.jpg)
#DevoxxUK
Angular Demo!
Start with angular-cli
Build Search Feature
Data via HTTP
Form Validation
CSS Frameworks
![Page 27: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/27.jpg)
#DevoxxUK
Built-in Components
<div *ngIf="str == 'yes'"></div> <div [ngSwitch]="myVar"> <div *ngSwitchWhen="'A'"></div> </div> <div [ngStyle]="{color: colorinput.value}"></div> <div [ngClass]="{bordered: true}"></div> <div *ngFor="let item of items; let num = index"></div>
![Page 28: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/28.jpg)
#DevoxxUK
The asterisk (*) effect
https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asteris
<div *ngIf="hero">{{hero}}</div> <div *ngFor="let hero of heroes">{{hero}}</div>
![Page 29: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/29.jpg)
#DevoxxUK
The asterisk (*) effect
<!-- Examples (A) and (B) are the same --> <!-- (A) *ngIf paragraph --> <p *ngIf="condition"> Our heroes are true! </p>
<!-- (B) [ngIf] with template --> <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>
![Page 30: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/30.jpg)
#DevoxxUK
Angular Forms
Template-Driven
import { FormsModule } from '@angular/forms';
Reactive Forms
import { ReactiveFormsModule } from '@angular/forms';
![Page 31: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/31.jpg)
#DevoxxUK
Template-Driven Validation
<label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
![Page 32: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/32.jpg)
#DevoxxUK
Reactive Forms Validation
<form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()"> <label for="name">Name</label> <input type="text" id="name" class="form-control" formControlName="name" required > <div *ngIf="formErrors.name" class="alert alert-danger"> {{ formErrors.name }} </div> </form>
![Page 33: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/33.jpg)
#DevoxxUK
Data Architectures
MVW / Two-way binding
Flux
Observables
![Page 34: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/34.jpg)
#DevoxxUK
Observables and RxJS
Promises emit a single value whereas streams emit many values
Imperative code “pulls” data whereas reactive streams “push” data
RxJS is functional
Streams are composable
![Page 35: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/35.jpg)
#DevoxxUK
Style Guides
John Papa’s Angular Style Guide
https://github.com/johnpapa/angular-styleguide
Official Angular Style Guide
https://angular.io/styleguide
![Page 36: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/36.jpg)
#DevoxxUK
Cool Projects
Web Workers and Service Workers
Electron
ng-bootstrap
Angular Material
JHipster, baby!
![Page 37: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/37.jpg)
#DevoxxUK
Lab: Create an Angular Project
Create a project
Run the application
Add a search feature
Add an edit feature
Add validation
http://bit.ly/ng-create
![Page 38: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/38.jpg)
Testing Applications
![Page 39: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/39.jpg)
#DevoxxUK
Quality
“A person who knows how to fix motorcycles—with Quality—is less likely to run short of friends than one who doesn't. And they aren't
going to see him as some kind of object either. Quality destroys objectivity every time.”
— Zen and the Art of Motorcycle Maintenance
![Page 40: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/40.jpg)
#DevoxxUK
Software Testing
With motorcycles, you drive to test them.
With software, you can test it without driving it.
Or rather, you can automate the driving.
If you don’t automate tests, you’re still testing!
![Page 41: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/41.jpg)
#DevoxxUK
Types of Tests
Unit Tests
End-to-End Tests
![Page 42: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/42.jpg)
#DevoxxUK
Unit Test Example
![Page 43: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/43.jpg)
#DevoxxUK
bus.spec.ts
![Page 44: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/44.jpg)
#DevoxxUK
Live Coding!
Unit Tests
Integration Tests
Continuous Integration
Deployment
Continuous Deployment
![Page 45: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/45.jpg)
#DevoxxUK
What you learned
How to…
Build an Angular application with modern tools
Unit test Angular services, mocking Http provider
Unit test Angular components, mocking service
Integration test an Angular application
Continuously test and deploy with a CI server
![Page 46: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/46.jpg)
#DevoxxUK
Don’t be afraid of testing!
![Page 47: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/47.jpg)
#DevoxxUK
Don’t be afraid of testing!
![Page 48: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/48.jpg)
#DevoxxUK
Don’t be afraid of testing!
![Page 49: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/49.jpg)
#DevoxxUK
Lab: Test an Angular Project
Unit testing
Integration testing
Continous Integration
Deploy to the ☁!
http://bit.ly/ng-test
![Page 50: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/50.jpg)
#DevoxxUK
ng-book 2
A comprehensive guide to developing with Angular 2
Sample apps: Reddit clone, Chat with RxJS Observables, YouTube search-as-you-type, Spotify Search
How to write components, use forms and APIs
Over 5,500+ lines of code!
![Page 51: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/51.jpg)
#DevoxxUK
ng-book 2
A comprehensive guide to developing with Angular 4
Worth all your hard earned $$$
https://www.ng-book.com/2
“Thank you for the awesome book, it's the bible for Angular.” — Vijay Ganta
![Page 52: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/52.jpg)
#DevoxxUK
Testing Angular Applications Book
Unit testing directives, pipes, services, and routes
End-to-end testing with elements and forms
5 of 10 chapters available
Estimated publication: Fall 2017
www.manning.com/books/testing-angular-applications
![Page 53: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/53.jpg)
#DevoxxUK
Testing JavaScript Applications
![Page 54: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/54.jpg)
#DevoxxUK
Who’s using Angular?
Made with AngularJS
https://www.madewithangular.com
Angular Expo
http://angularexpo.com
Awesome Angular
https://github.com/AngularClass/awesome-angular
![Page 55: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/55.jpg)
#DevoxxUK
Angular Performance Checklist
Network performance
Bundling
Minification and Dead code elimination
Ahead-of-Time (AoT) Compilation
Compression
Pre-fetching Resources
Lazy-Loading of Resources
Caching
https://github.com/mgechev/angular-performance-checklist
![Page 56: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/56.jpg)
#DevoxxUK
Lab: Authentication with OpenID Connect
http://developer.okta.com
http://bit.ly/ng-okta
youtube.com/watch?v=Kb56GzQ2pSk
![Page 57: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/57.jpg)
#DevoxxUK
https://github.com/mraible/ng-demo
https://youtu.be/Jq3szz2KOOs (Building)
https://youtu.be/TksyjxipM4M (Testing)
Angular and Angular CLI Demos
![Page 58: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/58.jpg)
#DevoxxUK
Shortcut to becoming an Angular Expert
JUST DO IT.
![Page 59: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/59.jpg)
#DevoxxUK
Shortcut to becoming an Angular Expert
YOU DID IT!
![Page 60: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/60.jpg)
#DevoxxUK
The JHipster Mini-Book
2.0 Release on Dec 5, 2016
jhipster-book.com
21-points.com
@jhipster_book
Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
![Page 62: The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017](https://reader035.fdocuments.in/reader035/viewer/2022062523/5a6770247f8b9aa3028b4999/html5/thumbnails/62.jpg)
#DevoxxUK
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible
Questions?