Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Started with Angular - Stormpath Webinar, January 2017

368 views

Published on

YouTube video of webinar: https://www.youtube.com/watch?v=Jq3szz2KOOs

This presentation is from a Stormpath Webinar I did on January 12, 2017. It was designed to teach developers how to build apps using Angular. Topics covered: tools needed, how to setup a project, how to run/deploy and how to deploy it to the cloud. I also talked about TypeScript, components, RxJS, routing, CSS frameworks and security.

Published in: Technology
  • Be the first to comment

Getting Started with Angular - Stormpath Webinar, January 2017

  1. 1. Getting Started with Matt Raible • @mraible
  2. 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. 3. 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
  4. 4. Stormpath User Management
  5. 5. My Angular Journey
  6. 6. Jobs on LinkedIn (US) January 2017 0 1,500 3,000 4,500 6,000 Backbone AngularJS Ember Knockout React
  7. 7. Jobs on LinkedIn (US) January 2017 0 650 1,300 1,950 2,600 Backbone Angular 2 Ember Knockout React
  8. 8. Jobs on LinkedIn (US) #ItsJustAngular January 2017 0 2,250 4,500 6,750 9,000 Backbone Angular Ember Knockout React
  9. 9. LinkedIn Skills January 2017 0 100,000 200,000 300,000 400,000 Backbone AngularJS Knockout Ember React
  10. 10. LinkedIn Skills January 2017 0 22,500 45,000 67,500 90,000 Backbone Angular 2 Knockout Ember React
  11. 11. LinkedIn Skills #ItsJustAngular January 2017 0 50,000 100,000 150,000 200,000 Backbone Angular Knockout Ember React
  12. 12. Google Trends
  13. 13. Who wants to learn ?
  14. 14. 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>
  15. 15. 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>
  16. 16. app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
  17. 17. 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 { }
  18. 18. app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
  19. 19. 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
  20. 20. 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
  21. 21. Angular Demo! Start with angular-cli Build Search Feature Data via HTTP Form Validation CSS Frameworks Security
  22. 22. 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>
  23. 23. 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>
  24. 24. 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>
  25. 25. Angular Forms Template-Driven import { FormsModule } from '@angular/forms'; Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
  26. 26. 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>
  27. 27. 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>
  28. 28. Data Architectures MVW / Two-way binding Flux Observables
  29. 29. 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
  30. 30. Style Guides John Papa’s Angular Style Guide https://github.com/johnpapa/angular-styleguide Official Angular Style Guide https://angular.io/styleguide
  31. 31. 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']);
  32. 32. Cool Projects Web Workers and Service Workers Universal Angular 2 Electron ng-bootstrap and Fuel-UI Angular Material JHipster, baby!
  33. 33. 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!
  34. 34. Who’s using Angular? Made with AngularJS https://www.madewithangular.com Angular Expo http://angularexpo.com Awesome Angular https://github.com/AngularClass/awesome-angular2
  35. 35. 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
  36. 36. Shortcut to becoming an Angular Expert JUST DO IT.
  37. 37. 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
  38. 38. Open Source Angular Projects 
 AngularJS SDK Angular SDK (beta) JHipster 4 (almost beta)
  39. 39. Contact Me! raibledesigns.com @mraible Presentations slideshare.net/mraible Code github.com/mraible Questions?

×