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.

Transcript

1. #dartlang
   

   View Slide

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

   View Slide

3. #dartlang
   ὑ
   

   View Slide

4. AngularDart is AngularJS’ new sibling
   

   View Slide

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

   View Slide

6. Angular Concepts
   

   View Slide

7. #dartlang
   Extend HTML
   Click  Me  
   !
   !
   !
   
   

   View Slide

8. Dependency Injection
   

   View Slide

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

   View Slide

10. Built with Testing in Mind
    

    View Slide

11. #dartlang
    Application Skeleton
    

    View Slide

12. #dartlang
     
     
     
     
         <br/>      
         <br/>      
       dart.js">  
         
     
    
    index.html
    

    View Slide

13. #dartlang
    import  'package:angular/angular.dart';  
    @MirrorsUsed(override:  '*')  
    import  'dart:mirrors';  
    !
    main()  =>  ngBootstrap();
    main.dart
    

    View Slide

14. #dartlang
    A Simple App
    

    View Slide

15. #dartlang
     
     
     
     
    !
       Hello  {{name}}!  
       Name:    
    !
         <br/>      
       <br/>script>  <br/>    <script  type="text/javascript"  src=“packages/browser/<br/>dart.js">  <br/>      
     
    
    index.html
    

    View Slide

16. Building Blocks
    !
    Controllers
    Components
    Directives
    Filters
    Services
    

    View Slide

17. #dartlang
    Controllers
    

    View Slide

18. #dartlang
     
         
             
               {{recipe.name}}  
             
         
    
    index.html
    

    View Slide

19. #dartlang
    class  RecipeBookController  {  
    !
       List  recipes;  
    !
       RecipeBookController()  {  
           recipes  =  _loadData();  
       }  
    !
       List  _loadData()  {  
           return  [  new  Recipe('My  Appetizer',  
                       ["Ingredient  1",  "Ingredient  2"])  ];  
       }  
    }
    recipe_book.dart
    

    View Slide

20. #dartlang
    @NgController(  
           selector:  '[recipe-­‐book]',  
           publishAs:  'ctrl')  
    class  RecipeBookController  {  
       …
    recipe_book.dart
    

    View Slide

21. #dartlang
    class  MyAppModule  extends  Module  {  
       MyAppModule()  {  
           type(RecipeBookController);  
       }  
    }  
    !
    main()  {  
       ngBootstrap(module:  new  MyAppModule());  
    }
    main.dart
    

    View Slide

22. #dartlang
    Components
    

    View Slide

23. #dartlang
     
    index.html
    

    View Slide

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
    

    View Slide

25. #dartlang
    Shadow DOM of a Video-Tag
    

    View Slide

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
    

    View Slide

27. #dartlang
    @NgComponent(  
           selector:  'rating',  
           templateUrl:  'rating_component.html',  
           cssUrl:  'rating_component.css',  
           publishAs:  'cmp'  
    )  
    class  RatingComponent  {  
         …
    rating_component.dart
    

    View Slide

28. #dartlang
    class  MyAppModule  extends  Module  {  
    !
       MyAppModule()  {  
           type(RecipeBookController);  
           type(RatingComponent);  
       }  
    }  
    !
    main()  {  
       ngBootstrap(module:  new  MyAppModule());  
    }  
    main.dart
    

    View Slide

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
    

    View Slide

30. #dartlang
    Filters
    

    View Slide

31. #dartlang
     
       {{  name  }}  
    
    index.html
    

    View Slide

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
    

    View Slide

33. #dartlang
    |  categoryfilter:ctrl.categoryFilterMap">  
       {{  name  }}  
    
    index.html
    

    View Slide

34. #dartlang
    Services
    

    View Slide

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.
    !
    !
    

    View Slide

36. #dartlang
    Thank you
    nik@blossom.io
    @nikgraf
    

    View Slide

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
    

    View Slide