Top Banner
31
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Dart and AngularDart
Page 2: Dart and AngularDart

https://www.dartlang.org/events/2014/flight-school/

Page 3: Dart and AngularDart
Page 5: Dart and AngularDart

Familiar

Looks like Java

Looks like C#

Behaves like JavaScript &

ActionScript

Page 6: Dart and AngularDart

New hotness

print('Angular' ' vs ' 'Ember?');

// Angular vs Ember

var premiereDate = '3/14/2014';

print('Date: $premiereDate');

// Date: 3/14/2014

Page 7: Dart and AngularDart

var premiereDate = '3/14/2014';

var template = '''

<p>

Winter is Coming: $premiereDate

</p>''';

<p>

Winter is Coming: 3/14/2014

</p>

Page 8: Dart and AngularDart

Good Baggage

Associative arrays/hash/map/dictvar person = {

'name': 'Kanye West',

'desc': 'annoyance'

};

var person = new Map();

Page 9: Dart and AngularDart

Good Baggage

Arrays/Listsvar brands = ['Subaru', 'Tesla'];

var brands = new List();

Page 10: Dart and AngularDart

Fun times with functions

num engage() {

print('maximum warp');

return 10;

}

makeItSo() {

print('set a course, #1');

}

energize((numberOfPeople) {

print('$numberOfPeople to beam up');

});

Page 11: Dart and AngularDart

Method cascadingquery('#comment').classes.remove('info')

query('#comment').classes.add('alert');

query('#comment').classes

..remove('info')

..add('alert');

Short handnum force(num mass, num velocity)

=> mass * velocity;

Page 12: Dart and AngularDart

Truthiness is the falsiness

Page 13: Dart and AngularDart

Tru(thy) love

No “truthiness”! If it’s not true, then it’s false!if ('ng-oc') console.log('truly, madly,

deeply');

// truly, madly, deeply

if ('ng-oc') print('truly, madly, deeply');

// Dart:

No undefined. Only null.

Page 14: Dart and AngularDart

Communication is key

'hello'.missing_method

// JS: undefined

// Dart: "hello".get$missing_method is not a

function

'hello' > 1

// JS: false

// Dart: $.JSString_methods.$gt is not a f

unction

Page 15: Dart and AngularDart

class Meetup {

int _id;

String name;

String url;

List<Member> members;

List events;

Meetup(this.name, this.url);

Meetup.fromUrl(string url) { /* load from API */ }

int get id => _id;

}

Stay classy

Page 16: Dart and AngularDart

Is Dart your type?

Dynamically typed

Optional typing

No type checking

Page 17: Dart and AngularDart

Familiarity — you know a little bit already!

Core ideas are the same

● MVC

● Testability

● Dependency injection

Page 18: Dart and AngularDart

So what do you already know?

View template concepts<h1>{{title}}</h1><input ng-model="title"/>

PODO models and data binding

Controllers, directives*

Dependency injection

Page 19: Dart and AngularDart

Ng-Dart dependency injectionm.factory('userRepo', ['$http',

function($http) {

return {

getUser: function(id) { /*... */ }

}

}]);

class UserRepo {

UserRepo(Http httpService) { }

User getUser(int id) { /*... */ }

}

Page 20: Dart and AngularDart

Ng-Dart service and modulesclass MeetupHero extends Module {

MeetupHero() {

type(UserRepo);

}

}

main() {

ngBootstrap(module: new MeetupHero());

}

Page 21: Dart and AngularDart

Ng-Dart controllers

@NgController(

'selector': 'meetup-controller',

'publishAs': 'ctrl')

class MeetupController {

List<Member> rsvps = [];

void addRsvp(m){ rsvps.add(m); }

}

<div meetup-controller>

<button

ng-click='ctrl.addRsvp(member)'/>

</div>

Page 22: Dart and AngularDart

Ng-Dart directives

AngularJS manages UI with controller and

directives

AngularDart merges the concepts and adds

another

Page 23: Dart and AngularDart

Ng-Dart directives

@NgDirective('selector': 'redAlert')

class RedAlert {

Element el;

RedAlert(this.el) {

el.onClick.listen((Event e) {

// change all the things to

red bg!

});

}

}

Page 24: Dart and AngularDart

Ng-Dart components

// rating_component.html

<span class="stars"

ng-if="cmp.rating != null"

ng-repeat="star in cmp.stars"

ng-click="cmp.handleClick(star)">

</span>

Page 25: Dart and AngularDart

Ng-Dart components

@NgComponent(

selector: 'rating',

templateUrl: 'rating_component.html',

cssUrl: 'rating_component.css',

publishAs: 'cmp'

)

Page 26: Dart and AngularDart

class RatingComponent {

int _izPrivate;

Element el;

RatingComponent(this.el) {

wouldRunInLinkingFn()

}

@NgTwoWay('rating')

int rating;

@NgAttr('max-rating')

set maxRating(String value) { /*...*/ }

void handleClick(int star) { /*...*/ }

void wouldRunInLinkingFn() { /*...*/ }

}

<rating max-rating="5" rating="movie.rating"></rating>

Page 27: Dart and AngularDart

ng-show all the things

Routing, filters, testing, scope, testing & more

Metaprogramming

Tree shaking

Server-side Dart

dart2js

Polymer

Futures/Promises

& more

Page 28: Dart and AngularDart

angulardart.org

dartlang.org

Page 29: Dart and AngularDart

25% off with code

LDEB25

40% off print, 50% off

ebook with code DART

25% off with code

pragprogDart2014

Page 30: Dart and AngularDart

ng-book.com

Page 31: Dart and AngularDart

Connecting flight with

Google Developer Group: OC

Miles Pickens