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.

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