Getting Started with Angular - Stormpath Webinar, January 2017

Getting Started with Matt Raible • @mraible

Blogger on raibledesigns.com UI Architect and Java Champion Father, Skier,
Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover Stormpath Developer Evangelist

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

Stormpath User Management

My Angular Journey

Jobs on LinkedIn (US) January 2017 0 1,500 3,000 4,500
6,000 Backbone AngularJS Ember Knockout React

Jobs on LinkedIn (US) January 2017 0 650 1,300 1,950
2,600 Backbone Angular 2 Ember Knockout React

Jobs on LinkedIn (US) #ItsJustAngular January 2017 0 2,250 4,500
6,750 9,000 Backbone Angular Ember Knockout React

LinkedIn Skills January 2017 0 100,000 200,000 300,000 400,000 Backbone
AngularJS Knockout Ember React

LinkedIn Skills January 2017 0 22,500 45,000 67,500 90,000 Backbone
Angular 2 Knockout Ember React

LinkedIn Skills #ItsJustAngular January 2017 0 50,000 100,000 150,000 200,000
Backbone Angular Knockout Ember React

Google Trends

Who wants to learn ?

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>

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

app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule
} from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

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 { }

app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }

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

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

Angular Demo! Start with angular-cli Build Search Feature Data via
HTTP Form Validation CSS Frameworks Security

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>

The asterisk (*) eﬀect https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asteris <div *ngIf="hero">{{hero}}</div> <div *ngFor="let hero
of heroes">{{hero}}</div>

The asterisk (*) eﬀect   <p *ngIf="condition"> Our heroes are true! </p>  <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>

Angular Forms Template-Driven import { FormsModule } from '@angular/forms'; Reactive
Forms import { ReactiveFormsModule } from '@angular/forms';

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>

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>

Data Architectures MVW / Two-way binding Flux Observables

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

Style Guides John Papa’s Angular Style Guide https://github.com/johnpapa/angular-styleguide Oﬃcial Angular
Style Guide https://angular.io/styleguide

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']);

Cool Projects Web Workers and Service Workers Universal Angular 2
Electron ng-bootstrap and Fuel-UI Angular Material JHipster, baby!

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!

Who’s using Angular? Made with AngularJS https://www.madewithangular.com Angular Expo http://angularexpo.com
Awesome Angular https://github.com/AngularClass/awesome-angular2

Angular Performance Checklist Network performance Bundling Miniﬁcation 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

Shortcut to becoming an Angular Expert JUST DO IT.

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

Open Source Angular Projects   AngularJS SDK Angular SDK (beta)
JHipster 4 (almost beta)

Contact Me! raibledesigns.com @mraible Presentations slideshare.net/mraible Code github.com/mraible Questions?

Getting Started with Angular - Stormpath Webinar, January 2017

Getting Started with Angular - Stormpath Webinar, January 2017

More Decks by Matt Raible

Other Decks in Technology

Featured

Transcript