Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
…but change was lurking in the maze of a mailing list …
https://groups.google.com/forum/#!search/misko$20Hevery$20may$2022$202013/polymer-dev/4RSYaKmbtEk/uYnY3900wpIJ
… then the threat became real …
ng-europe, October 2014https://www.youtube.com/watch?v=gNmWybAyBHI
https://twitter.com/kevindente/status/527500820603232257
About me …Jonas Bandi
[email protected] : @jbandi
- Freelancer: www.ivorycode.com- Dozent an der Berner Fachhochschule seit 2007- Trainer bei Digicomp für AngularJS und Angular 2- In-House Kurse & Coachings für Web-Technologien im Enterprise (UBS,
Postfinance, Mobiliar, BIT, SBB ... )
https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Angular 2 is a new implementation of the concepts behind AngularJS …
… for the modern web.
… but Angular 2 is not an update to AngularJS.
Angular 2 is built upon the modern web:
2015
- web workers- shadow dom
Angular 2 is built for the modern web:
• mobile browsers• modern browsers• server-side rendering
Angular 2 improves over AngularJS:• faster• easier to use & learn• built on proven best practices (i.e. ui-
components, unidirectional data flow …)
Angular Key Concepts
controllers components
data-binding data-binding / data-flowdirectives directives
servicesdependency injection
servicesdependency injection
components (ng 1.5) components
AngularJS Angular 2
Angular Key Concepts
controllerscomponents
components (ng 1.5)
AngularJS Angular 2
ES2015 classJavaScript Function
DDO
Angular 2 Components
Template Class Metadata
+ += Component
@Component
Components are the main building-block of Angular 2.
A Simple Component
import{Component}from'@angular/core';
@Component({selector:'my-app',template:'<h1>MyFirstAngular2App</h1>'})exportclassAppComponent{}
var app = angular.module('todoApp');app.controller('todoController', ToDoController); ToDoController.$inject = ['ToDoService']; function ToDoController(todoService) { var ctrl = this; ctrl.newToDo = new ToDoItem(); ctrl.todos = todoService.getToDos();
...
@Component({ selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService]}) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoService:ToDoService){} ngOnInit() { this.todos = this.todoService.loadToDos(); } ...
AngularJS Angular 2Controller -> Component
var app = angular.module('todoApp');app.component('TodoApp', { templateUrl: 'todo-app.html', controller: TodoAppComponent});ToDoController.$inject = ['ToDoService']; function TodoAppComponent(todoService) { var ctrl = this; ctrl.newToDo = new ToDoItem(); ctrl.todos = todoService.getToDos(); ...
@Component({ selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService]}) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoService:ToDoService){} ngOnInit() { this.todos = this.todoService.loadToDos(); } ...
AngularJS Angular 2
Component (ng 1.5) -> Component
Directives & ComponentsA directive is a construct, that is embedded into html and has
a special meaning for the framework.
Directives
Components StructuralDirectives
AttributeDirectives
Component Directiveis a
composes
Angular Key Concepts
directives directives
AngularJS Angular 2
many directives from ng1 are not
needed in ng2 templates
a lot of directives (i.eng-click,ng-focus,ng-blur,ng-keyup…)
AngularJS vs. Angular 2: DirectivesThe generic binding capabilities of Angular 2 makes many directives from AngularJS obsolete.
https://docs.angularjs.org/api/ng/directive https://angular.io/docs/ts/latest/api/
<divng-style={color:'red'}><imgng-src="{{ctrl.path}}"><ang-href=“{{ctrl.link}}">
<div[style.color]="color"><img[src]="path"><a[href]="link">
ng-click="savePerson(person)"ng-focus="updateSummary()"ng-blur="commit()"ng-keyup="updateCalculation()"
(click)="savePerson(person)"(focus)="updateSummary()"(blur)="commit()"(keyup)="updateCalculation()"
AngularJS Angular 2
Structural DirectivesUse html as a template
<ul class="todo-list" > <li ng-repeat="todo in ctrl.todos"> {{todo.title}} <button class="remove-button" ng-click="ctrl.removeToDo(todo)"> x </button> </li> </ul>
<ul class="todo-list" > <li *ngFor="let todo of todos"> {{todo.title}} <button class="remove-button" (click)="removeToDo(todo)"> x </button> </li> </ul>
AngularJS Angular 2
ng-repeat,ng-if *ngFor,*ngIf
Angular Key Concepts
data-binding data-binding / data-flow
AngularJS Angular 2
interpolation & 2-way databinding interpolation & 2-way databinding
uni-directional data-flow$scope
generic property & event binding
DatabindingInterpolation
Property Binding
Event Binding
Two Way Binding
{{value}}
[property]="value"
(event)="handler"
[(ngModel)]="value"
DOM (Template)
component
Nested Components: Uni-Directional Data-FlowState should be explicitly owned by a component.
• A parent component passes state to children
• Children should not edit state of their parent
• Children “notify” parents (events, actions …)
Child Component Child Component
Parent Component
state
properties
go in
logic
events come
out
update
@Input()
@Output()
Angular formalises unidirectional data-flow with @Input() and @Output() properties.
Angular Key Concepts
services services
AngularJS Angular 2
a function registered as factory, service or
providerES2015 class
ServicesObjects that perform a specific job.
Instantiated by Angular.
var app = angular.module('todoApp');app.factory('toDoService', toDoService); function toDoService() { 'use strict'; return { getToDos: getToDos, addToDo: addToDo, removeToDo: removeToDo }; ...
@Injectable() export class ToDoService { loadToDos():Array<ToDo> { var loadedToDos = JSON.parse( localStorage .getItem(TODOS_KEY) ); return loadedToDos || []; } ...
AngularJS Angular 2
Angular Key Concepts
dependency injection dependency injection
AngularJS Angular 2
DI based on namingDI based on types
(using TypeScript and Decorators)
Singletons Hierarchical DI
Dependency Injection
var app = angular.module('todoApp');app.factory('toDoService', toDoService); function toDoService() { ... }
@Injectable() export class ToDoService { ... }
AngularJS Angular 2
@Component({ selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService]}) export class TodoApp implements OnInit { constructor(private todoService:ToDoService){} ... }
app.controller('todoController', ToDoController); ToDoController.$inject = ['toDoService']; function ToDoController(todoService) { ... }
registration:
injection:
Angular Key Concepts
controllers components
data-binding data-binding / data-flowdirectives directives
servicesdependency injection
servicesdependency injection
components (ng 1.5) components
AngularJS Angular 2
Many key
concepts
remain t
he same.
But the
implement
ation ha
s changed
.
There is more …
filters Pipes
AngularJS Angular 2
http with Promises http with RxJs (Promises still supported)
Routing (template centered)
Hierarchical Component Router
… …
The core concepts of Angular 2 are clean and easy to learn …
… but setting up a full Angular project can be quite complicated today.
Angular is distributed through NPM
Node Package Manger
To get Angular on your development machine, you have to install Node.JS.
https://www.npmjs.com/
Angular for ES2015 & TS relies on ES2015 modules. There is no support for ES2015 modules in browsers today. A module-system is mandatory.
VS.SystemJS
To pack or (not) to pack?
Angular 2 aspires to be a platform
progressive web-apps for mobile(web workers, cache, push, offline)
https://mobile.angular.io/
classic web-apps for desktops
installed mobile apps (hybrid)
installed mobile apps (native integrations)
server side renderinghttps://universal.angular.io/
installed desktop apps
https://github.com/NathanWalker/angular2-seed-advanced
dev toolinghttps://cli.angular.io/
Is Angular 2 ready for production?October 2014: Initial announcement of Angular 2
December 2015: Angular 2 released as betaMay 2016: Angular 2 Release Candidate 0June 2016: Angular 2 Release Candidate 2
What is missing:- Router (!)- Offline Compilation & Build Toolchain- internationalization- 3rd Party Ecosystem
https://www.reddit.com/r/angularjs/comments/4i2n3k/angular_2_was_never_ready_for_a_release_candidate/
The Router Debacle
http://blog.jonasbandi.net/2016/06/ng2-router.html
- Dez 2014: New Router announced for Angular 1.4 and Angular 2
- June 2015: New Router is deprecated- Angular 2 beta is developed with the
Component router- March 2016: Component Router is
released for Angular 1.5- May 2016: Component Router is
deprecated. Router 2.0 is part of Angular 2 RC1
- June 2016: Router 2.0 is deprecated, Router 3.0 is announced
Jonas [email protected]
Twitter : @jbandi
Tomorrow: DevDay Workshop - Hands On Angular 2
Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und TypeScript
Questions?