Save 37% off PRO during our Black Friday Sale! »

The Ultimate Getting Started with Angular Workshop - Devoxx France 2017

The Ultimate Getting Started with Angular Workshop - Devoxx France 2017

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:


Matt Raible

April 05, 2017


  1. #DevoxxFR Getting Started with Matt Raible • @mraible

  2. Blogger on Java Champion and Web Developer Father, Skier,

    Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
  3. #DevoxxFR Authentication Standards

  4. My Angular Journey

  5. #DevoxxFR Jobs on LinkedIn (US) April 2017 0 2,000 4,000

    6,000 8,000 Backbone AngularJS Ember Knockout React Vue
  6. #DevoxxFR Jobs on LinkedIn (US) April 2017 0 3,500 7,000

    10,500 14,000 Backbone Angular Ember Knockout React Vue
  7. #DevoxxFR Stack Overflow Tags April 2017 0 75,000 150,000 225,000

    300,000 Backbone Angular Knockout Ember React
  8. #DevoxxFR People with ember.js on LinkedIn - huh?

  9. #DevoxxFR Google Trends - Angular

  10. #DevoxxFR Google Trends - Angular 2

  11. #DevoxxFR Google Trends - Angular 4

  12. None
  13. Who wants to learn ?

  14. #DevoxxFR 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=""></script> </body> </html>
  15. None
  16. #DevoxxFR 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>
  17. #DevoxxFR app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import {

    AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
  18. #DevoxxFR 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 { }
  19. #DevoxxFR app/app.component.ts import { Component } from '@angular/core'; @Component({ selector:

    'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
  20. #DevoxxFR 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
  21. #DevoxxFR ES6, ES7 and TypeScript TS ES7 ES6 ES5 ES5: ES6: ES7: DRAFT TS:
  22. #DevoxxFR TypeScript $ npm install -g typescript function greeter(person: string)

 return "Hello, " + person;
 var user = "Jane User";
 document.body.innerHTML = greeter(user); $ tsc greeter.ts
  23. #DevoxxFR bus.ts

  24. #DevoxxFR Easiest ways to get started Angular QuickStart Angular

    Seed Angular CLI
  25. None
  26. #DevoxxFR Angular Demo! Start with angular-cli Build Search Feature Data

    via HTTP Form Validation CSS Frameworks
  27. #DevoxxFR 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>
  28. #DevoxxFR The asterisk (*) effect!#asteris <div *ngIf="hero">{{hero}}</div> <div *ngFor="let

    hero of heroes">{{hero}}</div>
  29. #DevoxxFR 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>
  30. #DevoxxFR Angular Forms Template-Driven import { FormsModule } from '@angular/forms';

    Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
  31. #DevoxxFR Template-Driven Validation <label for="name">Name</label> <input type="text" class="form-control" id="name" required

    [(ngModel)]="" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
  32. #DevoxxFR 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="" class="alert alert-danger"> {{ }} </div> </form>
  33. #DevoxxFR Data Architectures MVW / Two-way binding Flux Observables

  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
  35. #DevoxxFR Style Guides John Papa’s Angular Style Guide Official

    Angular Style Guide
  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']);
  37. #DevoxxFR Cool Projects Web Workers and Service Workers Electron ng-bootstrap

    Angular Material JHipster, baby!
  38. #DevoxxFR Lab: Create an Angular Project Create a project Run

    the application Add a search feature Add an edit feature Add validation
  39. Testing Applications

  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!
  42. #DevoxxFR Types of Tests Unit Tests End-to-End Tests

  43. #DevoxxFR Unit Test Example

  44. #DevoxxFR bus.spec.ts

  45. #DevoxxFR Live Coding! Unit Tests Integration Tests Continuous Integration Deployment

    Continuous Deployment
  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
  47. #DevoxxFR Don’t be afraid of testing!

  48. #DevoxxFR Don’t be afraid of testing!

  49. #DevoxxFR Don’t be afraid of testing!

  50. #DevoxxFR Lab: Test an Angular Project Unit testing Integration testing

    Continous Integration Deploy to the ☁!
  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 $$$ “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
  54. #DevoxxFR Testing JavaScript Applications

  55. #DevoxxFR Who’s using Angular? Made with AngularJS Angular Expo 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
  57. #DevoxxFR Lab: Authentication with OpenID Connect

  58. #DevoxxFR (Building) (Testing) Angular and Angular CLI

  59. #DevoxxFR Shortcut to becoming an Angular Expert JUST DO IT.

  60. #DevoxxFR Shortcut to becoming an Angular Expert YOU DID IT!

  61. #DevoxxFR The JHipster Mini-Book 2.0 Release on Dec 5, 2016 @jhipster_book Write your own InfoQ mini-book!
  62. #DevoxxFR Keep in touch! @mraible Presentations Code