Download as PDF, PPTX
![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="#item of items; #num = index"></div>](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-25-2048.jpg)
![FORM_DIRECTIVES
import {Component} from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';
@Component({
selector: 'vehicle-form',
directives: [FORM_DIRECTIVES],](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-29-2048.jpg)
![ngForm
directives: [FORM_DIRECTIVES],
template: `
<h2>Vehicle Form</h2>
<form #f="ngForm"
(ngSubmit)="onSubmit(f.value)">
<label for="name">Name</label>
<input type="text" id="name"
placeholder="Name" ngControl="name">
<button type="submit">Submit</button>
</form>`](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-30-2048.jpg)
![FormBuilder
export class VehicleFormBuilder {
myForm: ControlGroup;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'name': ['Hefe']
})
}
}](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-32-2048.jpg)
![ngFormModel
<form [ngFormModel]="myForm"
(ngSubmit)="onSubmit(myForm.value)">
<input type="text" id="name" placeholder="Name"
[ngFormControl]="myForm.controls['name']">](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-33-2048.jpg)
![Validation
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'name': ['', Validators.required]
})
}](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-34-2048.jpg)
![Validation
<div class="form-group"
[class.has-error]="!myForm.find('name').valid
&& myForm.find('name').touched">](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-35-2048.jpg)
![Validation
<input type="text" id="name" placeholder="Name"
[ngFormControl]="myForm.controls['name']"
#name="ngForm">
<span *ngIf="!name.control.valid" class="help-block">
Name is invalid
</span>
<span *ngIf="name.control.hasError('required')"
class="help-block">Name is required</span>](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-36-2048.jpg)
![Upgrading from Angular 1.x to 2.x
Big Bang
Incremental
ngUpgrade import {UpgradeAdapter} from 'angular2/upgrade';
var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);
adapter.bootstrap(document.body, ['myApp']);](https://image.slidesharecdn.com/theartofangularjsin2016-160422175030/75/The-Art-of-Angular-in-2016-Devoxx-France-2016-40-2048.jpg)
Uploaded byMatt Raible
The Art of Angular in 2016 - Devoxx France 2016
The document provides an extensive overview of Angular 2, including setup instructions, code examples, and resources for building applications. It also discusses foundational knowledge for aspiring artists, with tips on learning from various mediums and engaging with the art community. Additionally, it addresses the transition from Angular 1.x to 2.x and features links to tutorials and style guides.
More Related Content
Similar to The Art of Angular in 2016 - Devoxx France 2016
The Art of Angular in 2016 - Devoxx France 2016
- 1. The Art ofin 2016 Photos by McGinity Photo Matt Raible • http://raibledesigns.com 2016
- 2. Blogger on raibledesigns.com Founderof AppFuse Father, Skier, Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover
- 3. How to Becomean Artist Part 1 of 3: Learn the Basics on Your Own Take some time and try various mediums of art Recognize your strengths Do your research and learn the basics Get the supplies you will need Observe the world around you Make time for your art every day Seek out the opinions of others Develop your own style http://www.wikihow.com/Become-an-Artist
- 4. Jobs on Dice.com April2016 0 750 1,500 2,250 3,000 Backbone Angular Em ber Knockout React
- 5. Job Growth 0 750 1500 2250 3000 February 2014January 2015 September 2015 April 2016 Ember.js AngularJS Backbone Knockout React
- 6.
- 7.
- 8. Skills Growth 0 75000 150000 225000 300000 February 2014January 2015 September 2015 April 2016 Ember.js AngularJS Backbone Knockout React
- 9.
- 10.
- 12. Who wants tolearn ?
- 13. 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.4.6/angular.min.js"></script> </body> </html>
- 15. Hello World withAngular 2 <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> </head> </html>
- 16. Hello World withAngular 2 <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
- 17.
- 18.
- 19. 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
- 20. ES6 vs TypeScript https://kangax.github.io/compat-table/es6/ Youstill have to use a transpiler to get ES6 support in IE11 Babel Traceur
- 21.
- 22. Emerging Stacks TypeScript Package Manager:npm Module Loader: SystemJS Transpiler: Traceur Build Tool: Broccoli ES6 Package Manager: JSPM Module Loader: SystemJS Transpiler: Babel Built Tool: Gulp
- 23. Getting Started Angular 2QuickStart 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
- 24. Angular 2 Demo! Startwith angular2-seed Build Search Feature Data via HTTP Unit Tests Integration Tests
- 25.
- 26. Angular 2 Forms Formscan be complex To help, Angular provides Controls Validators Observers
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. Data Architectures MVW /Two-way binding Flux Observables
- 38. 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
- 39. Style Guides John Papa’sAngular Style Guide https://github.com/johnpapa/angular-styleguide Minko Gechev’s Angular 2 Style Guide https://github.com/mgechev/angular2-style-guide
- 40. Upgrading from Angular1.x to 2.x Big Bang Incremental ngUpgrade import {UpgradeAdapter} from 'angular2/upgrade'; var adapter = new UpgradeAdapter(); var app = angular.module('myApp', []); adapter.bootstrap(document.body, ['myApp']);
- 41. Cool Projects Web Workersand Service Workers Universal Angular 2 Electron ng2-bootstrap and Fuel-UI Angular watchers JHipster, baby!
- 42. 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!
- 43. Who’s using Angular? Madewith Angular https://www.madewithangular.com Built with Angular 2 http://builtwithangular2.com 5 things Angular @5thingsAngular
- 44. When will Angular2 be released?
- 45. How to Becomean Artist Part 2 of 3: Learn from Others Enroll in local art classes Study the masters Go to art school Make friends in the artist community Visit art studios http://www.wikihow.com/Become-an-Artist
- 46. Shortcut to becomingan Angular Artist JUST DO IT.
- 47.
- 48. Scott Davis’s Angular2 Training http://shop.oreilly.com/category/learning-path/on-the-road-to-angular-2.do
- 49. 2016 Angular 2Tutorials Getting 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
- 50. Helpful Articles Angular 1to 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