These slides are from a workshop I did at Devoxx France 2017. I showed how to set up an Angular development environment from scratch, develop a simple app, test it, integrating CSS frameworks (Angular Material and Bootstrap 4), secure it with OpenID Connect, and deploy it to the cloud.
Source code and tutorial: https://github.com/mraible/ng-demo
2. Blogger on raibledesigns.com
Java Champion and Web Developer
Father, Skier, Mountain
Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
Okta Developer Advocate
34. #DevoxxFR
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
36. #DevoxxFR
Upgrading from AngularJS to Angular
Big Bang
Incremental
ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade';
var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);
adapter.bootstrap(document.body, ['myApp']);
38. #DevoxxFR
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
40. #DevoxxFR
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
41. #DevoxxFR
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!
46. #DevoxxFR
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
50. #DevoxxFR
Lab: Test an Angular Project
Unit testing
Integration testing
Continous Integration
Deploy to the ☁!
http://bit.ly/ng-test
51. #DevoxxFR
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!
52. #DevoxxFR
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
53. #DevoxxFR
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
55. #DevoxxFR
Who’s using Angular?
Made with AngularJS
https://www.madewithangular.com
Angular Expo
http://angularexpo.com
Awesome Angular
https://github.com/AngularClass/awesome-angular
56. #DevoxxFR
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
61. #DevoxxFR
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