Writing an InfoQ Mini-Book with Asciidoctor - Devoxx France 2016
The Art of Angular in 2016 - Devoxx France 2016
-
Upload
matt-raible -
Category
Technology
-
view
4.398 -
download
0
Transcript of The Art of Angular in 2016 - Devoxx France 2016
![Page 1: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/1.jpg)
The Art of in 2016
Photos by McGinity Photo
Matt Raible • http://raibledesigns.com 2016
![Page 2: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/2.jpg)
Blogger on raibledesigns.com
Founder of AppFuse
Father, Skier, Mountain Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover
![Page 3: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/3.jpg)
How to Become an ArtistPart 1 of 3: Learn the Basics on Your Own
Take some time and try various mediums of artRecognize your strengthsDo your research and learn the basicsGet the supplies you will needObserve the world around youMake time for your art every daySeek out the opinions of othersDevelop your own style http://www.wikihow.com/Become-an-Artist
![Page 4: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/4.jpg)
Jobs on Dice.comApril 2016
0
750
1,500
2,250
3,000
Back
bone
Angu
lar
Embe
r
Knoc
kout
Reac
t
![Page 5: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/5.jpg)
Job Growth
0
750
1500
2250
3000
February 2014 January 2015 September 2015 April 2016
Ember.js AngularJS Backbone Knockout React
![Page 6: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/6.jpg)
LinkedIn SkillsApril 2016
0
75,000
150,000
225,000
300,000
Back
bone
Angu
lar
Knoc
kout
Embe
r
Reac
t
![Page 7: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/7.jpg)
LinkedIn SkillsApril 2016
0
17,500
35,000
52,500
70,000
Back
bone
Knoc
kout
Embe
r
Reac
t
![Page 8: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/8.jpg)
Skills Growth
0
75000
150000
225000
300000
February 2014 January 2015 September 2015 April 2016
Ember.js AngularJS Backbone Knockout React
![Page 9: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/9.jpg)
Google Trends
![Page 10: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/10.jpg)
What about Angular 2?
![Page 11: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/11.jpg)
![Page 12: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/12.jpg)
Who wants to learn ?
![Page 13: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/13.jpg)
Hello World with AngularJS<!doctypehtml><htmlng-app><head><title>HelloWorld</title></head><body><div><label>Name:</label><inputtype="text"ng-model="name"placeholder="Enteranamehere"><hr><h1>Hello{{name}}!</h1></div><scriptsrc="http://code.angularjs.org/1.4.6/angular.min.js"></script></body></html>
![Page 15: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/15.jpg)
Hello World with Angular 2<html><head><title>Angular2QuickStart</title><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="styles.css"><!--1.Loadlibraries--><!--IErequiredpolyfills,inthisexactorder--><scriptsrc="node_modules/es6-shim/es6-shim.min.js"></script><scriptsrc="node_modules/systemjs/dist/system-polyfills.js"></script><scriptsrc="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script><scriptsrc="node_modules/angular2/bundles/angular2-polyfills.js"></script><scriptsrc="node_modules/systemjs/dist/system.src.js"></script><scriptsrc="node_modules/rxjs/bundles/Rx.js"></script><scriptsrc="node_modules/angular2/bundles/angular2.dev.js"></script>
</head></html>
![Page 16: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/16.jpg)
Hello World with Angular 2<!--2.ConfigureSystemJS--><script>System.config({packages:{app:{format:'register',defaultExtension:'js'}}});System.import('app/main').then(null,console.error.bind(console));</script></head><!--3.Displaytheapplication--><body><my-app>Loading...</my-app></body></html>
![Page 17: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/17.jpg)
app/main.ts
import{bootstrap}from'angular2/platform/browser';import{AppComponent}from'./app/components/app.component';
bootstrap(AppComponent);
![Page 18: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/18.jpg)
app/app.component.ts
import{Component}from'angular2/core';@Component({selector:'my-app',template:'<h1>MyFirstAngular2App</h1>'})exportclassAppComponent{}
![Page 19: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/19.jpg)
Angular 2 ChoicesChoose 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
![Page 20: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/20.jpg)
ES6 vs TypeScripthttps://kangax.github.io/compat-table/es6/
You still have to use a transpiler to get ES6 support in IE11
Babel
Traceur
![Page 21: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/21.jpg)
Who’s using Babel?
![Page 22: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/22.jpg)
Emerging StacksTypeScript
Package Manager: npm
Module Loader: SystemJS
Transpiler: Traceur
Build Tool: Broccoli
ES6
Package Manager: JSPM
Module Loader: SystemJS
Transpiler: Babel
Built Tool: Gulp
![Page 23: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/23.jpg)
Getting Started
Angular 2 QuickStart
https://github.com/angular/quickstart.git
Start with Angular 2 Seed
https://github.com/mgechev/angular2-seed.git
Advanced Angular 2 Seed
https://github.com/NathanWalker/angular2-seed-advanced.git
![Page 24: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/24.jpg)
Angular 2 Demo!Start with angular2-seed
Build Search Feature
Data via HTTP
Unit Tests
Integration Tests
![Page 25: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/25.jpg)
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="#itemofitems;#num=index"></div>
![Page 26: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/26.jpg)
Angular 2 FormsForms can be complex
To help, Angular provides
Controls
Validators
Observers
![Page 27: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/27.jpg)
ControlletnameControl=newControl("Abbie");letname=nameControl.value;//->Abbie//nowyoucanquerythiscontrolforcertainvalues:nameControl.errors//->StringMap<string,any>oferrorsnameControl.dirty//->falsenameControl.valid//->true
<inputtype="text"ngControl="name">
![Page 28: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/28.jpg)
Control GroupletvehicleInfo=newControlGroup({make:newControl('VW'),model:newControl('DeluxeSamba'),year:newControl('1966')});
vehicleInfo.value;//->{//make:"VW",//model:"DeluxeSamba",//year:"1966"//}
![Page 29: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/29.jpg)
FORM_DIRECTIVES
import{Component}from'angular2/core';import{FORM_DIRECTIVES}from'angular2/common';@Component({selector:'vehicle-form',directives:[FORM_DIRECTIVES],
![Page 30: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/30.jpg)
ngForm
directives:[FORM_DIRECTIVES],template:`<h2>VehicleForm</h2><form#f="ngForm"(ngSubmit)="onSubmit(f.value)"><labelfor="name">Name</label><inputtype="text"id="name"placeholder="Name"ngControl="name"><buttontype="submit">Submit</button></form>`
![Page 31: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/31.jpg)
ngSubmit
exportclassVehicleForm{onSubmit(form:any):void{console.log('formvalue:',form)}}
![Page 32: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/32.jpg)
FormBuilder
exportclassVehicleFormBuilder{myForm:ControlGroup;
constructor(fb:FormBuilder){this.myForm=fb.group({'name':['Hefe']})}}
![Page 33: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/33.jpg)
ngFormModel
<form[ngFormModel]="myForm"(ngSubmit)="onSubmit(myForm.value)">
<inputtype="text"id="name"placeholder="Name"[ngFormControl]="myForm.controls['name']">
![Page 34: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/34.jpg)
Validation
constructor(fb:FormBuilder){this.myForm=fb.group({'name':['',Validators.required]})}
![Page 35: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/35.jpg)
Validation
<divclass="form-group"[class.has-error]="!myForm.find('name').valid&&myForm.find('name').touched">
![Page 36: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/36.jpg)
Validation
<inputtype="text"id="name"placeholder="Name"[ngFormControl]="myForm.controls['name']"#name="ngForm">
<span*ngIf="!name.control.valid"class="help-block">Nameisinvalid</span><span*ngIf="name.control.hasError('required')"class="help-block">Nameisrequired</span>
![Page 37: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/37.jpg)
Data ArchitecturesMVW / Two-way binding
Flux
Observables
![Page 38: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/38.jpg)
Observables and RxJSPromises emit a single value whereas streams emit many values
Imperative code “pulls” data whereas reactive streams “push” data
RxJS is functional
Streams are composable
![Page 39: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/39.jpg)
Style GuidesJohn Papa’s Angular Style Guide
https://github.com/johnpapa/angular-styleguide
Minko Gechev’s Angular 2 Style Guide
https://github.com/mgechev/angular2-style-guide
![Page 40: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/40.jpg)
Upgrading from Angular 1.x to 2.xBig Bang
Incremental
ngUpgrade import{UpgradeAdapter}from'angular2/upgrade';
varadapter=newUpgradeAdapter();varapp=angular.module('myApp',[]);
adapter.bootstrap(document.body,['myApp']);
![Page 41: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/41.jpg)
Cool ProjectsWeb Workers and Service Workers
Universal Angular 2
Electron
ng2-bootstrap and Fuel-UI
Angular watchers
JHipster, baby!
![Page 42: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/42.jpg)
ng-book 2A 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!
![Page 43: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/43.jpg)
Who’s using Angular?Made with Angular
https://www.madewithangular.com
Built with Angular 2
http://builtwithangular2.com
5 things Angular
@5thingsAngular
![Page 45: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/45.jpg)
How to Become an ArtistPart 2 of 3: Learn from Others
Enroll in local art classesStudy the mastersGo to art schoolMake friends in the artist communityVisit art studios
http://www.wikihow.com/Become-an-Artist
![Page 46: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/46.jpg)
Shortcut to becoming an Angular Artist
JUST DO IT.
![Page 47: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/47.jpg)
Contact Me! http://raibledesigns.com
@mraible
Presentationshttp://slideshare.net/mraible
Codehttp://github.com/mraible
Questions?
![Page 48: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/48.jpg)
Scott Davis’s Angular 2 Training
http://shop.oreilly.com/category/learning-path/on-the-road-to-angular-2.do
![Page 49: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/49.jpg)
2016 Angular 2 TutorialsGetting Started with Angular 2
http://raibledesigns.com/rd/entry/getting_started_with_angular_2
Testing Angular 2 Applications
http://raibledesigns.com/rd/entry/testing_angular_2_applications
![Page 50: The Art of Angular in 2016 - Devoxx France 2016](https://reader035.fdocuments.in/reader035/viewer/2022062821/5889e6f11a28ab32458b5295/html5/thumbnails/50.jpg)
Helpful ArticlesAngular 1 to 2 Quick Reference
Scott Davis’s Getting Ready for Angular 2
Testing Angular 2 with Karma and Jasmine
Angular2 Observables, Http, and separating services and components
Managing State in Angular 2 Applications
Create a Desktop App with Angular 2 and Electron