AngularDart Introduction

#dartlang
nik@blossom.io
www.nikgraf.com
nikgraf
Nik Graf

AngularDart is AngularJS’ new sibling

“
”
#dartlang
Brad Green
Our goal is that there will be a single framework
with your choice of language.

#dartlang
Extend HTML
<div ng-‐click=“ctrl.doSomething()”>Click Me</div>
!
!
!
<my-‐calendar select-‐date=“2014-‐02-‐12”></my-‐calendar>

#dartlang
Dependency Injection
// hard coded dependency
class SomeClass() {
this.myObject = new MyClass();
}
!
// dependency injection
class SomeClass (MyClass myObject) {
this.myObject = myObject;
}

#dartlang
Application Skeleton

#dartlang
<!DOCTYPE html>
<html ng-‐app>
<head></head>
<body>
<script src=“packages/shadow_dom/shadow_dom.min.js">
</script>
<script type="application/dart" src="main.dart">
</script>
<script type="text/javascript" src=“packages/browser/
dart.js">
</script>
</body>
</html>
index.html

#dartlang
import 'package:angular/angular.dart';
@MirrorsUsed(override: '*')
import 'dart:mirrors';
!
main() => ngBootstrap();
main.dart

#dartlang
<!DOCTYPE html>
<html ng-‐app>
<head></head>
<body>
!
<h3>Hello {{name}}!</h3>
Name: <input type="text" ng-‐model="name">
!
<script src=“packages/shadow_dom/shadow_dom.min.js">
</script>
<script type="application/dart" src="main.dart"></
script>
<script type="text/javascript" src=“packages/browser/
dart.js">
</script>
</body>
</html>
index.html

Building Blocks
!
Controllers
Components
Directives
Filters
Services

#dartlang
<div recipe-‐book>
<ul>
<li ng-‐repeat="recipe in ctrl.recipes">
{{recipe.name}}
</li>
</ul>
</div>
index.html

#dartlang
class RecipeBookController {
!
List<Recipe> recipes;
!
RecipeBookController() {
recipes = _loadData();
}
!
List<Recipe> _loadData() {
return [ new Recipe('My Appetizer',
["Ingredient 1", "Ingredient 2"]) ];
}
}
recipe_book.dart

#dartlang
@NgController(
selector: '[recipe-‐book]',
publishAs: 'ctrl')
class RecipeBookController {
…
recipe_book.dart

#dartlang
class MyAppModule extends Module {
MyAppModule() {
type(RecipeBookController);
}
}
!
main() {
ngBootstrap(module: new MyAppModule());
}
main.dart

#dartlang
<rating rating=“3”></rating>
index.html

“
”
#dartlang
Eric Bidelman
Shadow DOM gives us markup encapsulation,
style boundaries, and exposes (to web
developers) the same mechanics browsers
vendors have been using to implement their
internal UI.
Shadow DOM

#dartlang
Shadow DOM of a Video-Tag

#dartlang
class RatingComponent {
!
@NgTwoWay('rating')
int rating;
!
void handleClick(int value) {
rating = value;
}
!
String renderCharacter(int index) {
return index > rating ? "0" : "X";
}
}
rating_component.dart

#dartlang
@NgComponent(
selector: 'rating',
templateUrl: 'rating_component.html',
cssUrl: 'rating_component.css',
publishAs: 'cmp'
)
class RatingComponent {
…
rating_component.dart

#dartlang
class MyAppModule extends Module {
!
MyAppModule() {
type(RecipeBookController);
type(RatingComponent);
}
}
!
main() {
ngBootstrap(module: new MyAppModule());
}
main.dart

#dartlang
@NgController
!
Application-speciﬁc logic
Example: recipe-book
!
@NgComponent
!
Custom elements
Example: rating
!
@NgDirective
!
Decorator that adds logic to existing elements
Examples: tooltip, ng-class

#dartlang
<li ng-‐repeat="recipe in ctrl.recipes | orderBy:'name'">
{{ name }}
</li>
index.html

#dartlang
@NgFilter(name: 'categoryfilter')
class CategoryFilter {
call(recipeList, filterMap) {
if (recipeList is List && filterMap is Map) {
// filter for something here
return recipeList.toList();
}
}
}
category_ﬁlter.dart

#dartlang
<li ng-‐repeat="recipe in ctrl.recipes | orderBy:'name'
| categoryfilter:ctrl.categoryFilterMap">
{{ name }}
</li>
index.html

Services
#dartlang
!
Services are substitutable objects that are wired together
using dependency injection. You can use services to organize
and share code across your app.
!
!
Angular for example provides a built-in service called the
Http Service that handles making HTTP requests to the
server.
!
!

#dartlang
Thank you
nik@blossom.io
@nikgraf

Resources
#dartlang
Siblings 
https://www.flickr.com/photos/swambo/13830270395
Building Blocks 
https://www.flickr.com/photos/tinker-tailor/4161713573
Blueprint 
https://www.flickr.com/photos/wscullin/3770015203
Construction Site 
http://commons.wikimedia.org/wiki/File:QV_Building_construction_site,_Melbourne_-
_March_2002.jpg

AngularDart Introduction

More Related Content

What's hot

Similar to AngularDart Introduction

More from Nikolaus Graf

Recently uploaded

AngularDart Introduction