AngularDart Introduction

AngularDart Introduction

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.

Afcee4ad6e383e26799ff05681d1a2a5?s=128

Nikolaus Graf

April 17, 2014
Tweet

Transcript

  1. #dartlang

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

  3. #dartlang ὑ

  4. AngularDart is AngularJS’ new sibling

  5. “ ” #dartlang Brad Green Our goal is that there

    will be a single framework with your choice of language.
  6. Angular Concepts

  7. #dartlang Extend HTML <div  ng-­‐click=“ctrl.doSomething()”>Click  Me</div>   ! ! !

    <my-­‐calendar  select-­‐date=“2014-­‐02-­‐12”></my-­‐calendar>
  8. Dependency Injection

  9. #dartlang Dependency Injection //  hard  coded  dependency   class  SomeClass()

     {          this.myObject  =  new  MyClass();   }   ! //  dependency  injection   class  SomeClass  (MyClass  myObject)  {          this.myObject  =  myObject;   }
  10. Built with Testing in Mind

  11. #dartlang Application Skeleton

  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. #dartlang import  'package:angular/angular.dart';   @MirrorsUsed(override:  '*')   import  'dart:mirrors';  

    ! main()  =>  ngBootstrap(); main.dart
  14. #dartlang A Simple App

  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. Building Blocks ! Controllers Components Directives Filters Services

  17. #dartlang Controllers

  18. #dartlang <div  recipe-­‐book>      <ul>        

     <li  ng-­‐repeat="recipe  in  ctrl.recipes">              {{recipe.name}}          </li>      </ul>   </div> index.html
  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. #dartlang @NgController(          selector:  '[recipe-­‐book]',    

         publishAs:  'ctrl')   class  RecipeBookController  {      … recipe_book.dart
  21. #dartlang class  MyAppModule  extends  Module  {      MyAppModule()  {

             type(RecipeBookController);      }   }   ! main()  {      ngBootstrap(module:  new  MyAppModule());   } main.dart
  22. #dartlang Components

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

  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. #dartlang Shadow DOM of a Video-Tag

  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. #dartlang @NgComponent(          selector:  'rating',    

         templateUrl:  'rating_component.html',          cssUrl:  'rating_component.css',          publishAs:  'cmp'   )   class  RatingComponent  {        … rating_component.dart
  28. #dartlang class  MyAppModule  extends  Module  {   !    MyAppModule()

     {          type(RecipeBookController);          type(RatingComponent);      }   }   ! main()  {      ngBootstrap(module:  new  MyAppModule());   }   main.dart
  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. #dartlang Filters

  31. #dartlang <li  ng-­‐repeat="recipe  in  ctrl.recipes  |  orderBy:'name'">      {{

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

         {{  name  }}   </li> index.html
  34. #dartlang Services

  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. #dartlang Thank you nik@blossom.io @nikgraf

  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