Upload
matt-raible
View
1.698
Download
0
Embed Size (px)
Citation preview
The Art of in 2016
Photos by McGinity Photo
Matt Raible • @mraible
Blogger on raibledesigns.com
Founder of AppFuse
Father, Skier, Mountain Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover
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
Job Growth
0
750
1500
2250
3000
February 2014 January 2015 September 2015 April 2016 June 2016
Ember.js AngularJS Backbone Knockout React
Skills Growth
0
75000
150000
225000
300000
February 2014 January 2015 September 2015 April 2016 June 2016
Ember.js AngularJS Backbone Knockout React
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.5.6/angular.min.js"></script></body></html>
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--><!--Polyfills,forolderbrowsers--><scriptsrc="node_modules/core-js/client/shim.min.js"></script>
<scriptsrc="node_modules/zone.js/dist/zone.js"></script><scriptsrc="node_modules/reflect-metadata/Reflect.js"></script><scriptsrc="node_modules/systemjs/dist/system.src.js"></script>
</head></html>
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>
app/main.ts
import{bootstrap}from‘@angular/platform-browser-dynamic';import{AppComponent}from'./app.component';
bootstrap(AppComponent);
app/app.component.ts
import{Component}from‘@angular/core’;
@Component({selector:'my-app',template:'<h1>MyFirstAngular2App</h1>'})exportclassAppComponent{}
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
ES6 vs TypeScripthttps://kangax.github.io/compat-table/es6/
You still have to use a transpiler to get ES6 support in IE11
Babel
Traceur
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
Getting Started
Angular 2 QuickStart
https://github.com/angular/quickstart
Angular 2 Seed
https://github.com/mgechev/angular2-seed
Angular CLI
https://github.com/angular/angular-cli
Angular 2 Demo!Start with angular-cli
Build Search Feature
Data via HTTP
Unit Tests
Integration Tests
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="letitemofitems;letnum=index"></div>
ControlletnameControl=newControl("Abbie");letname=nameControl.value;//->Abbie//nowyoucanquerythiscontrolforcertainvalues:nameControl.errors//->StringMap<string,any>oferrorsnameControl.dirty//->falsenameControl.valid//->true
<inputtype="text"ngControl="name">
Control GroupletvehicleInfo=newControlGroup({make:newControl('VW'),model:newControl('DeluxeSamba'),year:newControl('1966')});
vehicleInfo.value;//->{//make:"VW",//model:"DeluxeSamba",//year:"1966"//}
FORM_DIRECTIVES
import{Component}from‘@angular/core';import{FORM_DIRECTIVES}from‘@angular/common';@Component({selector:'vehicle-form',directives:[FORM_DIRECTIVES],
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>`
FormBuilder
exportclassVehicleFormBuilder{myForm:ControlGroup;
constructor(fb:FormBuilder){this.myForm=fb.group({'name':['Hefe']})}}
ngFormModel
<form[ngFormModel]="myForm"(ngSubmit)="onSubmit(myForm.value)">
<inputtype="text"id="name"placeholder="Name"[ngFormControl]="myForm.controls['name']">
Validation
<divclass="form-group"[class.has-error]="!myForm.find('name').valid&&myForm.find('name').touched">
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>
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
Style GuidesJohn Papa’s Angular Style Guide
https://github.com/johnpapa/angular-styleguide
https://angular.io/docs/ts/latest/guide/style-guide.html
Minko Gechev’s Angular 2 Style Guide
https://github.com/mgechev/angular2-style-guide
Upgrading from Angular 1.x to 2.xBig Bang
Incremental
ngUpgrade import{UpgradeAdapter}from‘@angular/upgrade';
varadapter=newUpgradeAdapter();varapp=angular.module('myApp',[]);
adapter.bootstrap(document.body,['myApp']);
Cool ProjectsWeb Workers and Service Workers
Universal Angular 2
Electron
ng2-bootstrap and Fuel-UI
Angular watchers
JHipster, baby!
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!
Who’s using Angular?Made with Angular
https://www.madewithangular.com
Built with Angular 2
http://builtwithangular2.com
5 things Angular
@5thingsAngular
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
Contact Me! http://raibledesigns.com
@mraible
Presentationshttp://slideshare.net/mraible
Codehttp://github.com/mraible
Questions?
Scott Davis’s Angular 2 Training
http://shop.oreilly.com/category/learning-path/on-the-road-to-angular-2.do
2016 Angular 2 TutorialsGetting Started with Angular 2
http://raibledesigns.com/rd/entry/getting_started_with_angular_2_rc1
Testing Angular 2 Applications
http://raibledesigns.com/rd/entry/testing_angular_2_0_rc1
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