The document discusses Dart and AngularDart. It provides examples of how Dart code looks similar to languages like Java and C# but behaves like JavaScript. It demonstrates core Dart features like classes, functions, and type inference. It also shows how AngularJS concepts like controllers, directives and dependency injection map to AngularDart. Components are introduced as AngularDart's way to encapsulate reusable UI logic and templates. Discounts for Dart books and resources are listed at the end.

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

5. Familiar
Looks like Java
Looks like C#
Behaves like JavaScript &
ActionScript

6. New hotness
print('Angular' ' vs ' 'Ember?');
// Angular vs Ember
var premiereDate = '3/14/2014';
print('Date: $premiereDate');
// Date: 3/14/2014

7. var premiereDate = '3/14/2014';
var template = '''
<p>
Winter is Coming: $premiereDate
</p>''';
<p>
Winter is Coming: 3/14/2014
</p>

8. Good Baggage
Associative arrays/hash/map/dict
var person = {
'name': 'Kanye West',
'desc': 'annoyance'
};
var person = new Map();

9. Good Baggage
Arrays/Lists
var brands = ['Subaru', 'Tesla'];
var brands = new List();

10. Fun times with functions
num engage() {
print('maximum warp');
return 10;
}
makeItSo() {
print('set a course, #1');
}
energize((numberOfPeople) {
print('$numberOfPeople to beam up');
});

11. Method cascading
query('#comment').classes.remove('info')
query('#comment').classes.add('alert');
query('#comment').classes
..remove('info')
..add('alert');
Short hand
num force(num mass, num velocity)
=> mass * velocity;

12. Truthiness is the falsiness

13. 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.

14. 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

15. 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

16. Is Dart your type?
Dynamically typed
Optional typing
No type checking

17. Familiarity — you know a little bit already!
Core ideas are the same
● MVC
● Testability
● Dependency injection

18. 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

19. Ng-Dart dependency injection
m.factory('userRepo', ['$http',
function($http) {
return {
getUser: function(id) { /*... */ }
}
}]);
class UserRepo {
UserRepo(Http httpService) { }
User getUser(int id) { /*... */ }
}

20. Ng-Dart service and modules
class MeetupHero extends Module {
MeetupHero() {
type(UserRepo);
}
}
main() {
ngBootstrap(module: new MeetupHero());
}

21. 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>

22. Ng-Dart directives
AngularJS manages UI with controller and
directives
AngularDart merges the concepts and adds
another

23. 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!
});
}
}

24. 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>

25. Ng-Dart components
@NgComponent(
selector: 'rating',
templateUrl: 'rating_component.html',
cssUrl: 'rating_component.css',
publishAs: 'cmp'
)

26. 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>

27. ng-show all the things
Routing, filters, testing, scope, testing & more
Metaprogramming
Tree shaking
Server-side Dart
dart2js
Polymer
Futures/Promises
& more

28. angulardart.org
dartlang.org

29. 25% off with code
LDEB25
40% off print, 50% off
ebook with code DART
25% off with code
pragprogDart2014

30. ng-book.com

31. Connecting flight with
Google Developer Group: OC
Miles Pickens