Embed Size (px)
Citation preview
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 LoverStormpath 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) #ItsJustAngularJanuary 2017
0
2,250
4,500
6,750
9,000
Backbone Angular Ember Knockout React
LinkedIn SkillsJanuary 2017
0
100,000
200,000
300,000
400,000
Backbone AngularJS Knockout Ember React
LinkedIn SkillsJanuary 2017
0
22,500
45,000
67,500
90,000
Backbone Angular 2 Knockout Ember React
LinkedIn Skills #ItsJustAngularJanuary 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"> <!-- 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>
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 (*) 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>
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>
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
Official 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
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
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?
