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

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

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

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(19)

Similar to Getting Started with Angular - Stormpath Webinar, January 2017

Similar to Getting Started with Angular - Stormpath Webinar, January 2017(20)

More from Matt Raible

More from Matt Raible(20)

Recently uploaded

Recently uploaded(20)

Getting Started with Angular - Stormpath Webinar, January 2017