Getting Started With Angular
•
2 likes•769 views
Join Stormpath Java Developer Evangelist, Matt Raible, to learn how to build apps using Angular. You will learn about the tools you need to setup a project, how to run/debug your app, and how to deploy it to the cloud. You’ll also learn about new concepts in Angular 2+.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Getting Started With Angular
Similar to Getting Started With Angular (20)
More from Stormpath
More from Stormpath (8)
Recently uploaded
Recently uploaded (20)
Getting Started With Angular
- 1. Getting Started with Matt Raible • @mraible
- 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
- 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
- 7. Jobs on LinkedIn (US) January 2017 0 1,500 3,000 4,500 6,000 Backbone AngularJS Ember Knockout React
- 8. Jobs on LinkedIn (US) January 2017 0 650 1,300 1,950 2,600 Backbone Angular 2 Ember Knockout React
- 9. Jobs on LinkedIn (US) #ItsJustAngular January 2017 0 2,250 4,500 6,750 9,000 Backbone Angular Ember Knockout React
- 10. LinkedIn Skills January 2017 0 100,000 200,000 300,000 400,000 Backbone AngularJS Knockout Ember React
- 11. LinkedIn Skills January 2017 0 22,500 45,000 67,500 90,000 Backbone Angular 2 Knockout Ember React
- 12. LinkedIn Skills #ItsJustAngular January 2017 0 50,000 100,000 150,000 200,000 Backbone Angular Knockout Ember React
- 13. Google Trends
- 15. Who wants to learn ?
- 16. 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>
- 18. 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>
- 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>
- 28. Angular Forms Template-Driven import { FormsModule } from '@angular/forms'; Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
- 29. 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>
- 30. 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>
- 31. Data Architectures MVW / Two-way binding Flux Observables
- 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
- 33. Style Guides John Papa’s Angular Style Guide https://github.com/johnpapa/angular-styleguide Official Angular Style Guide https://angular.io/styleguide
- 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
- 39. Shortcut to becoming an Angular Expert JUST DO IT.
- 40. 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
- 41. Open Source Angular Projects AngularJS SDK Angular SDK (beta) JHipster 4 (almost beta)