#dartlang
#dartlang
nik@blossom.io
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-­‐...
Dependency Injection
#dartlang
Dependency Injection
//  hard  coded  dependency  
class  SomeClass()  {  
        this.myObject  =  new  MyClas...
Built with Testing in Mind
#dartlang
Application Skeleton
#dartlang
<!DOCTYPE  html>  
<html  ng-­‐app>  
<head></head>  
<body>  
    <script  src=“packages/shadow_dom/shadow_dom....
#dartlang
import  'package:angular/angular.dart';  
@MirrorsUsed(override:  '*')  
import  'dart:mirrors';  
!
main()  => ...
#dartlang
A Simple App
#dartlang
<!DOCTYPE  html>  
<html  ng-­‐app>  
<head></head>  
<body>  
!
    <h3>Hello  {{name}}!</h3>  
    Name:  <inp...
Building Blocks
!
Controllers
Components
Directives
Filters
Services
#dartlang
Controllers
#dartlang
<div  recipe-­‐book>  
    <ul>  
        <li  ng-­‐repeat="recipe  in  ctrl.recipes">  
            {{recipe.na...
#dartlang
class  RecipeBookController  {  
!
    List<Recipe>  recipes;  
!
    RecipeBookController()  {  
        recipe...
#dartlang
@NgController(  
        selector:  '[recipe-­‐book]',  
        publishAs:  'ctrl')  
class  RecipeBookControll...
#dartlang
class  MyAppModule  extends  Module  {  
    MyAppModule()  {  
        type(RecipeBookController);  
    }  
} ...
#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) th...
#dartlang
Shadow DOM of a Video-Tag
#dartlang
class  RatingComponent  {  
!
    @NgTwoWay('rating')  
    int  rating;  
!
    void  handleClick(int  value)  ...
#dartlang
@NgComponent(  
        selector:  'rating',  
        templateUrl:  'rating_component.html',  
        cssUrl: ...
#dartlang
class  MyAppModule  extends  Module  {  
!
    MyAppModule()  {  
        type(RecipeBookController);  
        ...
#dartlang
@NgController
!
Application-specific logic
Example: recipe-book
!
@NgComponent
!
Custom elements
Example: rating
...
#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...
#dartlang
<li  ng-­‐repeat="recipe  in  ctrl.recipes  |  orderBy:'name'  
|  categoryfilter:ctrl.categoryFilterMap">  
   ...
#dartlang
Services
Services
#dartlang
!
Services are substitutable objects that are wired together
using dependency injection. You can use se...
#dartlang
Thank you
nik@blossom.io
@nikgraf
Resources
#dartlang
Siblings

https://www.flickr.com/photos/swambo/13830270395
Building Blocks

https://www.flickr.com/photo...
Upcoming SlideShare
Loading in …5
×

AngularDart Introduction

2,527 views

Published on

Since recently AngularJS has a new sibling called AngularDart. Both are based on the same concepts.

With AngularDart you can write web applications using Angular concepts and leveraging the benefits of the Dart language.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,527
On SlideShare
0
From Embeds
0
Number of Embeds
359
Actions
Shares
0
Downloads
17
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

AngularDart Introduction

  1. 1. #dartlang
  2. 2. #dartlang nik@blossom.io www.nikgraf.com nikgraf Nik Graf
  3. 3. #dartlang ♡
  4. 4. AngularDart is AngularJS’ new sibling
  5. 5. “ ” #dartlang Brad Green Our goal is that there will be a single framework with your choice of language.
  6. 6. Angular Concepts
  7. 7. #dartlang Extend HTML <div  ng-­‐click=“ctrl.doSomething()”>Click  Me</div>   ! ! ! <my-­‐calendar  select-­‐date=“2014-­‐02-­‐12”></my-­‐calendar>
  8. 8. Dependency Injection
  9. 9. #dartlang Dependency Injection //  hard  coded  dependency   class  SomeClass()  {          this.myObject  =  new  MyClass();   }   ! //  dependency  injection   class  SomeClass  (MyClass  myObject)  {          this.myObject  =  myObject;   }
  10. 10. Built with Testing in Mind
  11. 11. #dartlang Application Skeleton
  12. 12. #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
  13. 13. #dartlang import  'package:angular/angular.dart';   @MirrorsUsed(override:  '*')   import  'dart:mirrors';   ! main()  =>  ngBootstrap(); main.dart
  14. 14. #dartlang A Simple App
  15. 15. #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
  16. 16. Building Blocks ! Controllers Components Directives Filters Services
  17. 17. #dartlang Controllers
  18. 18. #dartlang <div  recipe-­‐book>      <ul>          <li  ng-­‐repeat="recipe  in  ctrl.recipes">              {{recipe.name}}          </li>      </ul>   </div> index.html
  19. 19. #dartlang class  RecipeBookController  {   !    List<Recipe>  recipes;   !    RecipeBookController()  {          recipes  =  _loadData();      }   !    List<Recipe>  _loadData()  {          return  [  new  Recipe('My  Appetizer',                      ["Ingredient  1",  "Ingredient  2"])  ];      }   } recipe_book.dart
  20. 20. #dartlang @NgController(          selector:  '[recipe-­‐book]',          publishAs:  'ctrl')   class  RecipeBookController  {      … recipe_book.dart
  21. 21. #dartlang class  MyAppModule  extends  Module  {      MyAppModule()  {          type(RecipeBookController);      }   }   ! main()  {      ngBootstrap(module:  new  MyAppModule());   } main.dart
  22. 22. #dartlang Components
  23. 23. #dartlang <rating  rating=“3”></rating>   index.html
  24. 24. “ ” #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
  25. 25. #dartlang Shadow DOM of a Video-Tag
  26. 26. #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
  27. 27. #dartlang @NgComponent(          selector:  'rating',          templateUrl:  'rating_component.html',          cssUrl:  'rating_component.css',          publishAs:  'cmp'   )   class  RatingComponent  {        … rating_component.dart
  28. 28. #dartlang class  MyAppModule  extends  Module  {   !    MyAppModule()  {          type(RecipeBookController);          type(RatingComponent);      }   }   ! main()  {      ngBootstrap(module:  new  MyAppModule());   }   main.dart
  29. 29. #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
  30. 30. #dartlang Filters
  31. 31. #dartlang <li  ng-­‐repeat="recipe  in  ctrl.recipes  |  orderBy:'name'">      {{  name  }}   </li> index.html
  32. 32. #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
  33. 33. #dartlang <li  ng-­‐repeat="recipe  in  ctrl.recipes  |  orderBy:'name'   |  categoryfilter:ctrl.categoryFilterMap">      {{  name  }}   </li> index.html
  34. 34. #dartlang Services
  35. 35. 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. ! !
  36. 36. #dartlang Thank you nik@blossom.io @nikgraf
  37. 37. 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

×