THE ROAD TO ANGULAR 2.0 ABOUT ME Angular 1.x apps iOS apps REST - - PowerPoint PPT Presentation

▶
the road to angular 2 0 about me
SMART_READER_LITE
LIVE PREVIEW

THE ROAD TO ANGULAR 2.0 ABOUT ME Angular 1.x apps iOS apps REST - - PowerPoint PPT Presentation

Jan 31, 2023 249 likes •973 views

THE ROAD TO ANGULAR 2.0 ABOUT ME Angular 1.x apps iOS apps REST API's in Java Maarten Hus, Developer @ WHY THIS TALK? WAIT WHAT?! GRAVEYARD WHY? DISCLAIMER THE ROAD 1.x T emplate Syntax 2.0 T ypes Bindings ES6

slide-1
SLIDE 1
slide-2
SLIDE 2

THE ROAD TO ANGULAR 2.0

slide-3
SLIDE 3

ABOUT ME

Maarten Hus, Developer @

  • Angular 1.x apps
  • iOS apps
  • REST API's in Java
slide-4
SLIDE 4

WHY THIS TALK?

slide-5
SLIDE 5

WAIT WHAT?!

slide-6
SLIDE 6

GRAVEYARD

slide-7
SLIDE 7

WHY?

slide-8
SLIDE 8

DISCLAIMER

slide-9
SLIDE 9

THE ROAD

T emplate Syntax ES6 Components Bindings T ypes 1.x 2.0

slide-10
SLIDE 10

TEMPLATE SYNTAX

Angular 2.0's template syntax is radically different from 1.x's.

slide-11
SLIDE 11

DIFFERENCES

<span>Username: {{user.username}}</span> <img ng-src="{{ user.imageUrl }}"/> <button ng-click="upvote(user)">+1</button> <span>Username: {{user.username}}</span> <img [src]="{{ user.imageUrl }}"/> <button (click)="upvote(user)">+1</button>

1.x 2.0

slide-12
SLIDE 12

DIFFERENCES

<span>Username: {{user.username}}</span> <img ng-src="{{ user.imageUrl }}"/> <button ng-click="upvote(user)">+1</button> <span>Username: {{user.username}}</span> <img [src]="{{ user.imageUrl }}"/> <button (click)="upvote(user)">+1</button>

1.x 2.0

slide-13
SLIDE 13

DIFFERENCES

<span>Username: {{user.username}}</span> <img ng-src="{{ user.imageUrl }}"/> <button ng-click="upvote(user)">+1</button> <span>Username: {{user.username}}</span> <img [src]="{{ user.imageUrl }}"/> <button (click)="upvote(user)">+1</button>

1.x 2.0

slide-14
SLIDE 14

DIFFERENCES

<span>Username: {{user.username}}</span> <img ng-src="{{ user.imageUrl }}"/> <button ng-click="upvote(user)">+1</button> <span>Username: {{user.username}}</span> <img [src]="{{ user.imageUrl }}"/> <button (click)="upvote(user)">+1</button>

1.x 2.0

slide-15
SLIDE 15

2.0 SYNTAX

[] => property binding, is an expression () => event, is a statement, caused by the user.

slide-16
SLIDE 16

NO NEED FOR

ng-bind, ng-src, ng-class, ng-href, ng-show, ng-hide, ng-click, ng-enabled, ng-disabled, ng-blur, ng-keyup, ng- mouse-down etc etc

slide-17
SLIDE 17

EASIER TO LEARN

Angular 2.0 templates are closer to HTML.

slide-18
SLIDE 18

The new syntax makes it easer to
 reason about templates.

REASONING

slide-19
SLIDE 19

THE ROAD

T emplate Syntax ES6 Components Bindings T ypes 2.0 1.x

slide-20
SLIDE 20

MODULES

ES6 Modules are bundles of 'code' from which you can import specific 'code'.

slide-21
SLIDE 21

EXAMPLE

// MathFuctions.js export function square(x) { return x * x; } // main.js import {square} from 'MathFuctions'; console.log(square(5)); // logs 25 to console

A B

slide-22
SLIDE 22

ANGULAR 2.0

import {Component, View} from 'angular2/angular2';

slide-23
SLIDE 23

ANGULAR 1.X

angular.module('users') .factory('userFactory', ['$http', function($http) { // code for userFactory which uses $http }]);

slide-24
SLIDE 24

ANGULAR 2.0

Why create your own a module system, when the language (ES6) hands it to you.

slide-25
SLIDE 25

HE'S DEAD JIM

slide-26
SLIDE 26

THE ROAD

T emplate Syntax ES6 Components Bindings T ypes 2.0 1.x

slide-27
SLIDE 27

TYPESCRIPT

slide-28
SLIDE 28

ANGULAR 2.0

import {Component, View} from 'angular2/angular2'; @Component({selector: 'person'}) @View({ template: `<p>My name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; constructor(name: string) { this.name = name; } }

slide-29
SLIDE 29

@COMPONENT

import {Component, View} from 'angular2/angular2'; @Component({selector: 'person'}) @View({ template: `<p>My name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; constructor(name: string) { this.name = name; } }

<person></person>

slide-30
SLIDE 30

@VIEW

import {Component, View} from 'angular2/angular2'; @Component({selector: 'person'}) @View({ template: `<p>My name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; constructor(name: string) { this.name = name; } }

slide-31
SLIDE 31

TYPES

import {Component, View} from 'angular2/angular2'; @Component({selector: 'display'}) @View({ template: `<p>My name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; constructor(name: string) { this.name = name; } }

slide-32
SLIDE 32

WHY TYPES?

  • 1. IDE's and Text Editors love types.
  • 2. Types help show your intent.
slide-33
SLIDE 33

THE ROAD

T emplate Syntax ES6 Components Bindings T ypes 2.0 1.x

slide-34
SLIDE 34

COMPONENTS

View Controller

Component

slide-35
SLIDE 35

COMPONENT

import {Component, View} from 'angular2/angular2'; @Component({selector: 'display'}) @View({ template: `<p>My name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; constructor(name: string) { this.name = name; } }

Controller View

slide-36
SLIDE 36

INPUT / OUTPUT

View Controller

Component Input Output

slide-37
SLIDE 37

I/O

import {View, If} from 'angular2/angular2'; @View({ template: `<p *if="name.length > 3">My name: {{ name }}</p>`,
 directives: [If] })

If is explicitly importe d Co mponents must state
 their depen dencies (input).

slide-38
SLIDE 38

I/O

import {Component} from 'angular2/angular2'; @Component({ selector: 'person', properties: { name: 'name' },
 events: ['upvote'] })

<person [name]="firstName"></person>

slide-39
SLIDE 39

I/O

import {Component} from 'angular2/angular2'; @Component({ selector: 'person', properties: { name: 'name' },
 events: ['upvote'] })

<person (upvote)="vote()"></person>

slide-40
SLIDE 40

WHY COMPONENTS

  • 1. Components have clearly defined 


inputs and outputs.

  • 2. Components are composable
  • 3. Components can easily be reused.
slide-41
SLIDE 41

ANGULAR 1.X

Directives Controllers

slide-42
SLIDE 42

THEY LIVE!

slide-43
SLIDE 43

THE ROAD

T emplate Syntax ES6 Components Bindings T ypes 2.0 1.x

slide-44
SLIDE 44

BINDINGS

Angular 2.0 will no longer have two way bindings.

slide-45
SLIDE 45

ANGULAR 1.X

A C B D

slide-46
SLIDE 46

Digest Phase Cycle

EXPENSIVE

A B

slide-47
SLIDE 47

UNPREDICTABLE

<div ng-controller="PersonController as personController"> <h1>Hi {{ personController.person.name }} <person-view person="personController.person"></person-view> </div>

slide-48
SLIDE 48

UNNECESSARY

A B

<h1>Hi {{ name }}</h1> <input type="text" value="{{ name }}">

slide-49
SLIDE 49

ANGULAR 2.0

How does Angular 2.0 handle bindings?

slide-50
SLIDE 50

WEATHER APP

slide-51
SLIDE 51

TREE OF COMPONENTS

WeatherApp Grid WeatherStation WeatherStation WeatherStation SegmentedButton SearchBar

slide-52
SLIDE 52

ANGULAR 2.0

A B A B

bindings [] 
 go down events ()
 go up

slide-53
SLIDE 53

CHANGE DETECTION

Digest Phase Cycle

1.x

Digest Phase

2.0

slide-54
SLIDE 54

SPEED

slide-55
SLIDE 55

MEMORY

slide-56
SLIDE 56

< MEMORY =

slide-57
SLIDE 57

THE ROAD

T emplate Syntax ES6 Components Bindings T ypes 2.0 1.x

slide-58
SLIDE 58

MIGRATION

2.0 1.x

?

slide-59
SLIDE 59

MIGRATION

2.0 1.x Big Bang Incremental

slide-60
SLIDE 60

BIG BANG

slide-61
SLIDE 61

INCREMENTAL

slide-62
SLIDE 62

WHAT TO CHOOSE?

Big Bang Incremental Small App Big App Few dependencies Many dependencies If you have the time If there is no time

slide-63
SLIDE 63

EXAMPLE: A

Big Bang Incremental Small App Big App Few dependencies Many dependencies If you have the time If there is no time

slide-64
SLIDE 64

EXAMPLE: B

Big Bang Incremental Small App Big App Few dependencies Many dependencies If you have the time If there is no time

slide-65
SLIDE 65

PREPARING FOR 2.0

  • 1. Upgrade to 1.4
  • 2. Use the new router
  • 3. Use ES6 classes
slide-66
SLIDE 66

DONE

T emplate Syntax ES6 Components Bindings T ypes 2.0 1.x

slide-67
SLIDE 67

CONCLUSION

slide-68
SLIDE 68

CONCLUSION

jqLite angular. module Controllers $scope DDO

slide-69
SLIDE 69

THE END

During the conference you can find me at the 42's stand. So if you have any questions you know where to find me.

slide-70
SLIDE 70