angulardart introduction
Post on 13-Jan-2015
1.686 Views
Preview:
DESCRIPTION
TRANSCRIPT
#dartlang
#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-specific 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_filter.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. !
!
Resources
#dartlang
Siblingshttps://www.flickr.com/photos/swambo/13830270395
Building Blockshttps://www.flickr.com/photos/tinker-tailor/4161713573
Blueprinthttps://www.flickr.com/photos/wscullin/3770015203
Construction Sitehttp://commons.wikimedia.org/wiki/File:QV_Building_construction_site,_Melbourne_-_March_2002.jpg
top related