This document provides an overview of Angular and highlights some key points about Matt Raible and his experience with Angular. It discusses Angular's speed, security features, and easy API. It also shows trends in Angular's popularity compared to other frameworks and provides code examples to demonstrate how to get started with Angular. The document encourages learning Angular and directs readers to additional resources like Matt's open source projects and presentations.
2. 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
3.
4. 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
19. app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
20. 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 { }
21. app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }
22. 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
23. 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
24. Angular Demo!
Start with angular-cli
Build Search Feature
Data via HTTP
Form Validation
CSS Frameworks
Security
25. 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>
26. 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>
27. 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>
32. 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
34. 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']);
35. Cool Projects
Web Workers and Service Workers
Universal Angular 2
Electron
ng-bootstrap and Fuel-UI
Angular Material
JHipster, baby!
36. 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!
37. Who’s using Angular?
Made with AngularJS
https://www.madewithangular.com
Angular Expo
http://angularexpo.com
Awesome Angular
https://github.com/AngularClass/awesome-angular2
38. 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