AngularDart Introduction

#dartlang

#dartlang [email protected] www.nikgraf.com nikgraf Nik Graf

#dartlang ὑ

AngularDart is AngularJS’ new sibling

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

Angular Concepts

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

Dependency Injection

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

Built with Testing in Mind

#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 A Simple App

#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 Controllers

#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 Components

#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 Filters

#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

#dartlang Services

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 [email protected] @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

AngularDart Introduction

More Decks by Nikolaus Graf

Other Decks in Programming

Featured

Transcript