The Art of Angular in 2016 - vJUG24
3 likes1,202 views
Take some time to try various art mediums on your own, recognize your strengths, do research to learn basics, get necessary supplies, observe the world, make time for art daily, and seek feedback to develop your style. Enrolling in classes, studying masters, and visiting art studios can further help you learn from others. While it takes practice, just start creating to become an artist.
![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/theartofangularjsin2016-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-23-320.jpg)
![FORM_DIRECTIVES
import { Component } from ‘@angular/core';
import { FORM_DIRECTIVES } from ‘@angular/common';
@Component({
selector: 'vehicle-form',
directives: [FORM_DIRECTIVES],](https://image.slidesharecdn.com/theartofangularjsin2016-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-27-320.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-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-28-320.jpg)
![FormBuilder
export class VehicleFormBuilder {
myForm: ControlGroup;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'name': ['Hefe']
})
}
}](https://image.slidesharecdn.com/theartofangularjsin2016-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-30-320.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-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-31-320.jpg)
![Validation
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'name': ['', Validators.required]
})
}](https://image.slidesharecdn.com/theartofangularjsin2016-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-32-320.jpg)
![Validation
<div class="form-group"
[class.has-error]="!myForm.find('name').valid
&& myForm.find('name').touched">](https://image.slidesharecdn.com/theartofangularjsin2016-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-33-320.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-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-34-320.jpg)
![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']);](https://image.slidesharecdn.com/theartofangularjsin2016-vjug24-160928030014/85/The-Art-of-Angular-in-2016-vJUG24-38-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (8)
Similar to The Art of Angular in 2016 - vJUG24 (20)
More from Matt Raible (20)
Recently uploaded (20)
The Art of Angular in 2016 - vJUG24
- 1. The Art of in 2016 Photos by McGinity Photo Matt Raible • @mraible
- 2. Developer Evangelist at Stormpath Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover
- 3. How to Become an 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 LinkedIn (US) September 2016 0 1,250 2,500 3,750 5,000 Backbone Angular Em ber Knockout React
- 5. Job Growth 0 750 1500 2250 3000 February 2014 January 2015 September 2015 April 2016 June 2016 September 2016 Ember.js AngularJS Backbone Knockout React
- 8. Skills Growth 0 100000 200000 300000 400000 February 2014 January 2015 September 2015 April 2016 June 2016 September 2016 Ember.js AngularJS Backbone Knockout React
- 10. What about Angular 2?
- 12. Who wants to learn ?
- 13. 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>
- 15. Hello World with Angular 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 --> <!-- Polyfills, 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/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> </head> </html>
- 16. Hello World with Angular 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>
- 19. 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
- 20. Easiest ways to get 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
- 22. Angular 2 Demo! Start with angular-cli Build Search Feature Data via HTTP Unit Tests Integration Tests
- 24. Angular 2 Forms Forms can be complex To help, Angular provides Controls Validators Observers
- 29. ngSubmit export class VehicleForm { onSubmit(form: any): void { console.log('form value:', form) } }
- 35. Data Architectures MVW / Two-way binding Flux Observables
- 36. 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
- 37. Style Guides John 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
- 38. 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']);
- 39. Cool Projects Web Workers and Service Workers Universal Angular 2 Electron ng2-bootstrap and Fuel-UI Angular watchers JHipster, baby!
- 40. 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!
- 41. Who’s using Angular? Made with Angular https://www.madewithangular.com Built with Angular 2 http://builtwithangular2.com
- 42. Angular 2 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
- 43. How to Become an 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
- 44. Shortcut to becoming an Angular Artist JUST DO IT.
- 45. https://github.com/mraible/ng2-demo http://gist.asciidoctor.org/?github-mraible %2Fng2-demo%2F%2FREADME.adoc Shows what we did today, + unit tests, integration tests and continuous integration! Angular 2 and Angular CLI Demo
- 46. Open Source Angular 2 Projects AngularJS SDK Angular 2 SDK (in-progress) Angular 2 Tasks (in-progress)