Download as PDF, PPTX
![#DevoxxFR
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 { }](https://image.slidesharecdn.com/theultimategettingstartedwithangularworkshop-170418201924/85/The-Ultimate-Getting-Started-with-Angular-Workshop-Devoxx-France-2017-18-320.jpg)
![#DevoxxFR
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>](https://image.slidesharecdn.com/theultimategettingstartedwithangularworkshop-170418201924/85/The-Ultimate-Getting-Started-with-Angular-Workshop-Devoxx-France-2017-27-320.jpg)
![#DevoxxFR
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>](https://image.slidesharecdn.com/theultimategettingstartedwithangularworkshop-170418201924/85/The-Ultimate-Getting-Started-with-Angular-Workshop-Devoxx-France-2017-29-320.jpg)
![#DevoxxFR
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>](https://image.slidesharecdn.com/theultimategettingstartedwithangularworkshop-170418201924/85/The-Ultimate-Getting-Started-with-Angular-Workshop-Devoxx-France-2017-31-320.jpg)
![#DevoxxFR
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>](https://image.slidesharecdn.com/theultimategettingstartedwithangularworkshop-170418201924/85/The-Ultimate-Getting-Started-with-Angular-Workshop-Devoxx-France-2017-32-320.jpg)
![#DevoxxFR
Upgrading from AngularJS to Angular
Big Bang
Incremental
ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade';
var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);
adapter.bootstrap(document.body, ['myApp']);](https://image.slidesharecdn.com/theultimategettingstartedwithangularworkshop-170418201924/85/The-Ultimate-Getting-Started-with-Angular-Workshop-Devoxx-France-2017-36-320.jpg)
Uploaded byMatt Raible
The Ultimate Getting Started with Angular Workshop - Devoxx France 2017
The document provides a comprehensive overview of getting started with Angular, including code examples for basic applications, component setup, and environment configuration. It covers best practices, testing methodologies, and resources for further learning. The content emphasizes the importance of quality in development and testing processes.
More Related Content
Similar to The Ultimate Getting Started with Angular Workshop - Devoxx France 2017
The Ultimate Getting Started with Angular Workshop - Devoxx France 2017
- 1. #DevoxxFR Getting Started with MattRaible • @mraible
- 2. Blogger on raibledesigns.com JavaChampion and Web Developer Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
- 3.
- 4.
- 5. #DevoxxFR Jobs on LinkedIn(US) April 2017 0 2,000 4,000 6,000 8,000 Backbone AngularJS Ember Knockout React Vue
- 6. #DevoxxFR Jobs on LinkedIn(US) April 2017 0 3,500 7,000 10,500 14,000 Backbone Angular Ember Knockout React Vue
- 7. #DevoxxFR Stack Overflow Tags April2017 0 75,000 150,000 225,000 300,000 Backbone Angular Knockout Ember React
- 8. #DevoxxFR People with ember.json LinkedIn - huh?
- 9. #DevoxxFR Google Trends -Angular
- 10. #DevoxxFR Google Trends -Angular 2
- 11. #DevoxxFR Google Trends -Angular 4
- 13. Who wants tolearn ?
- 14. #DevoxxFR Hello World withAngularJS <!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>
- 16. #DevoxxFR Hello World withAngular <!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>
- 17. #DevoxxFR app/main.ts import { platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
- 18. #DevoxxFR 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 { }
- 19. #DevoxxFR app/app.component.ts import { Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
- 20. #DevoxxFR Angular 2+ Choices Choosea 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
- 21. #DevoxxFR ES6, ES7 andTypeScript TSES7ES6ES5 ES5: es5.github.io ES6: git.io/es6features ES7: DRAFT TS: www.typescriptlang.org
- 22. #DevoxxFR TypeScript $ npm install-g typescript function greeter(person: string) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user); $ tsc greeter.ts https://www.typescriptlang.org/docs/tutorial.html
- 23.
- 24. #DevoxxFR Easiest ways toget started Angular QuickStart https://github.com/angular/quickstart Angular Seed https://github.com/mgechev/angular-seed Angular CLI https://github.com/angular/angular-cli
- 26. #DevoxxFR Angular Demo! Start withangular-cli Build Search Feature Data via HTTP Form Validation CSS Frameworks
- 27. #DevoxxFR 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>
- 28. #DevoxxFR 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>
- 29. #DevoxxFR 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>
- 30. #DevoxxFR Angular Forms Template-Driven import {FormsModule } from '@angular/forms'; Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
- 31. #DevoxxFR Template-Driven Validation <label for="name">Name</label> <inputtype="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>
- 32. #DevoxxFR 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>
- 33. #DevoxxFR Data Architectures MVW /Two-way binding Flux Observables
- 34. #DevoxxFR Observables and RxJS Promisesemit a single value whereas streams emit many values Imperative code “pulls” data whereas reactive streams “push” data RxJS is functional Streams are composable
- 35. #DevoxxFR Style Guides John Papa’sAngular Style Guide https://github.com/johnpapa/angular-styleguide Official Angular Style Guide https://angular.io/styleguide
- 36. #DevoxxFR Upgrading from AngularJSto Angular Big Bang Incremental ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade'; var adapter = new UpgradeAdapter(); var app = angular.module('myApp', []); adapter.bootstrap(document.body, ['myApp']);
- 37. #DevoxxFR Cool Projects Web Workersand Service Workers Electron ng-bootstrap Angular Material JHipster, baby!
- 38. #DevoxxFR Lab: Create anAngular Project Create a project Run the application Add a search feature Add an edit feature Add validation http://bit.ly/ng-create
- 39.
- 40. #DevoxxFR Quality “A person whoknows how to fix motorcycles—with Quality—is less likely to run short of friends than one who doesn't. And they aren't going to see him as some kind of object either. Quality destroys objectivity every time.” — Zen and the Art of Motorcycle Maintenance
- 41. #DevoxxFR Software Testing With motorcycles,you drive to test them. With software, you can test it without driving it. Or rather, you can automate the driving. If you don’t automate tests, you’re still testing!
- 42. #DevoxxFR Types of Tests UnitTests End-to-End Tests
- 43.
- 44.
- 45. #DevoxxFR Live Coding! Unit Tests IntegrationTests Continuous Integration Deployment Continuous Deployment
- 46. #DevoxxFR What you learned Howto… Build an Angular application with modern tools Unit test Angular services, mocking Http provider Unit test Angular components, mocking service Integration test an Angular application Continuously test and deploy with a CI server
- 47. #DevoxxFR Don’t be afraidof testing!
- 48. #DevoxxFR Don’t be afraidof testing!
- 49. #DevoxxFR Don’t be afraidof testing!
- 50. #DevoxxFR Lab: Test anAngular Project Unit testing Integration testing Continous Integration Deploy to the ☁! http://bit.ly/ng-test
- 51. #DevoxxFR ng-book 2 A comprehensiveguide 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!
- 52. #DevoxxFR ng-book 2 A comprehensiveguide to developing with Angular 4 Worth all your hard earned $$$ https://www.ng-book.com/2 “Thank you for the awesome book, it's the bible for Angular.” — Vijay Ganta
- 53. #DevoxxFR Testing Angular ApplicationsBook Unit testing directives, pipes, services, and routes End-to-end testing with elements and forms 5 of 10 chapters available Estimated publication: Fall 2017 www.manning.com/books/testing-angular-applications
- 54.
- 55. #DevoxxFR Who’s using Angular? Madewith AngularJS https://www.madewithangular.com Angular Expo http://angularexpo.com Awesome Angular https://github.com/AngularClass/awesome-angular
- 56. #DevoxxFR Angular Performance Checklist Networkperformance 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
- 57. #DevoxxFR Lab: Authentication withOpenID Connect http://developer.okta.com http://bit.ly/ng-okta youtube.com/watch?v=Kb56GzQ2pSk
- 58.
- 59. #DevoxxFR Shortcut to becomingan Angular Expert JUST DO IT.
- 60. #DevoxxFR Shortcut to becomingan Angular Expert YOU DID IT!
- 61. #DevoxxFR The JHipster Mini-Book 2.0Release on Dec 5, 2016 jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
- 62.