Dart and AngularDart
-
Upload
loc-nguyen -
Category
Engineering
-
view
261 -
download
2
Transcript of Dart and AngularDart
https://www.dartlang.org/events/2014/flight-school/
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();
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;
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
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
25% off with code
LDEB25
40% off print, 50% off
ebook with code DART
25% off with code
pragprogDart2014