Dart and AngularDart

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

Familiar

Looks like Java

Looks like C#

Behaves like JavaScript &

ActionScript

New hotness

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

// Angular vs Ember

var premiereDate = '3/14/2014';

print('Date: $premiereDate');

// Date: 3/14/2014

var premiereDate = '3/14/2014';

var template = '''

<p>

Winter is Coming: $premiereDate

</p>''';

<p>

Winter is Coming: 3/14/2014

</p>

Good Baggage

Associative arrays/hash/map/dictvar person = {

'name': 'Kanye West',

'desc': 'annoyance'

};

var person = new Map();

Good Baggage

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

var brands = new List();

Fun times with functions

num engage() {

print('maximum warp');

return 10;

}

makeItSo() {

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

}

energize((numberOfPeople) {

print('$numberOfPeople to beam up');

});

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;

Truthiness is the falsiness

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.

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

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

Is Dart your type?

Dynamically typed

Optional typing

No type checking

Familiarity — you know a little bit already!

Core ideas are the same

● MVC

● Testability

● Dependency injection

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

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

function($http) {

return {

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

}

}]);

class UserRepo {

UserRepo(Http httpService) { }

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

}

Ng-Dart service and modulesclass MeetupHero extends Module {

MeetupHero() {

type(UserRepo);

}

}

main() {

ngBootstrap(module: new MeetupHero());

}

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>

Ng-Dart directives

AngularJS manages UI with controller and

directives

AngularDart merges the concepts and adds

another

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!

});

}

}

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>

Ng-Dart components

@NgComponent(

selector: 'rating',

templateUrl: 'rating_component.html',

cssUrl: 'rating_component.css',

publishAs: 'cmp'

)

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>

ng-show all the things

Routing, filters, testing, scope, testing & more

Metaprogramming

Tree shaking

Server-side Dart

dart2js

Polymer

Futures/Promises

& more

angulardart.org

dartlang.org

25% off with code

LDEB25

40% off print, 50% off

ebook with code DART

25% off with code

pragprogDart2014

ng-book.com

Connecting flight with

Google Developer Group: OC

Miles Pickens