![Page 1: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/1.jpg)
Getting Started with
Matt Raible • @mraible
![Page 2: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/2.jpg)
Blogger on raibledesigns.com
UI Architect and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus LoverStormpath Developer Evangelist
![Page 3: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/3.jpg)
![Page 4: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/4.jpg)
Speed to Market & Cost Reduction
Complete Identity solution out-of-the-box
Security best practices and updates by default
Clean and elegant API/SDKs
Little to code, no maintenance
![Page 5: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/5.jpg)
Stormpath User Management
![Page 6: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/6.jpg)
My Angular Journey
![Page 7: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/7.jpg)
Jobs on LinkedIn (US)January 2017
0
1,500
3,000
4,500
6,000
Backbone AngularJS Ember Knockout React
![Page 8: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/8.jpg)
Jobs on LinkedIn (US)January 2017
0
650
1,300
1,950
2,600
Backbone Angular 2 Ember Knockout React
![Page 9: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/9.jpg)
Jobs on LinkedIn (US) #ItsJustAngularJanuary 2017
0
2,250
4,500
6,750
9,000
Backbone Angular Ember Knockout React
![Page 10: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/10.jpg)
LinkedIn SkillsJanuary 2017
0
100,000
200,000
300,000
400,000
Backbone AngularJS Knockout Ember React
![Page 11: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/11.jpg)
LinkedIn SkillsJanuary 2017
0
22,500
45,000
67,500
90,000
Backbone Angular 2 Knockout Ember React
![Page 12: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/12.jpg)
LinkedIn Skills #ItsJustAngularJanuary 2017
0
50,000
100,000
150,000
200,000
Backbone Angular Knockout Ember React
![Page 13: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/13.jpg)
Google Trends
![Page 14: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/14.jpg)
![Page 15: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/15.jpg)
Who wants to learn ?
![Page 16: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/16.jpg)
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 17: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/17.jpg)
![Page 18: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/18.jpg)
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 19: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/19.jpg)
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
![Page 20: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/20.jpg)
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 21: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/21.jpg)
app/app.component.ts
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
![Page 22: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/22.jpg)
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 23: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/23.jpg)
Easiest ways to get started
Angular QuickStart
https://github.com/angular/quickstart
Angular Seed
https://github.com/mgechev/angular-seed
Angular CLI
https://github.com/angular/angular-cli
![Page 24: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/24.jpg)
Angular Demo!
Start with angular-cli
Build Search Feature
Data via HTTP
Form Validation
CSS Frameworks
Security
![Page 25: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/25.jpg)
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 26: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/26.jpg)
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 27: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/27.jpg)
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 28: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/28.jpg)
Angular Forms
Template-Driven
import { FormsModule } from '@angular/forms';
Reactive Forms
import { ReactiveFormsModule } from '@angular/forms';
![Page 29: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/29.jpg)
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 30: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/30.jpg)
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 31: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/31.jpg)
Data Architectures
MVW / Two-way binding
Flux
Observables
![Page 32: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/32.jpg)
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 33: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/33.jpg)
Style Guides
John Papa’s Angular Style Guide
https://github.com/johnpapa/angular-styleguide
Official Angular Style Guide
https://angular.io/styleguide
![Page 34: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/34.jpg)
Upgrading from Angular 1.x to 2.x
Big Bang
Incremental
ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade';
var adapter = new UpgradeAdapter(); var app = angular.module('myApp', []);
adapter.bootstrap(document.body, ['myApp']);
![Page 35: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/35.jpg)
Cool Projects
Web Workers and Service Workers
Universal Angular 2
Electron
ng-bootstrap and Fuel-UI
Angular Material
JHipster, baby!
![Page 36: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/36.jpg)
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 37: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/37.jpg)
Who’s using Angular?
Made with AngularJS
https://www.madewithangular.com
Angular Expo
http://angularexpo.com
Awesome Angular
https://github.com/AngularClass/awesome-angular2
![Page 38: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/38.jpg)
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 39: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/39.jpg)
Shortcut to becoming an Angular Expert
JUST DO IT.
![Page 40: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/40.jpg)
https://github.com/mraible/ng-demo
http://gist.asciidoctor.org/?github-mraible/ng-demo//README.adoc
Shows what we did today, + unit tests, integration tests and continuous integration!
Angular and Angular CLI Demo
![Page 41: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/41.jpg)
Open Source Angular Projects
AngularJS SDK
Angular SDK (beta)
JHipster 4 (almost beta)
![Page 42: Getting Started with Angular - Stormpath Webinar, January 2017](https://reader033.vdocument.in/reader033/viewer/2022042906/589ea8191a28ab38288b5523/html5/thumbnails/42.jpg)
Contact Me!
raibledesigns.com
@mraible
Presentations
slideshare.net/mraible
Code
github.com/mraible
Questions?