Tweet
Tweet

Slide 1

Slide 1 text

#dartlang

Slide 2

Slide 2 text

#dartlang [email protected] www.nikgraf.com nikgraf Nik Graf

Slide 3

Slide 3 text

#dartlang ὑ

Slide 4

Slide 4 text

AngularDart is AngularJS’ new sibling

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Angular Concepts

Slide 7

Slide 7 text

#dartlang Extend HTML
Click  Me
  ! ! !

Slide 8

Slide 8 text

Dependency Injection

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Built with Testing in Mind

Slide 11

Slide 11 text

#dartlang Application Skeleton

Slide 12

Slide 12 text

#dartlang                                               index.html

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

#dartlang A Simple App

Slide 15

Slide 15 text

#dartlang         !    

Hello  {{name}}!

     Name:     !                </ script>      <script  type="text/javascript"  src=“packages/browser/ dart.js">           index.html

Slide 16

Slide 16 text

Building Blocks ! Controllers Components Directives Filters Services

Slide 17

Slide 17 text

#dartlang Controllers

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

#dartlang Components

Slide 23

Slide 23 text

#dartlang   index.html

Slide 24

Slide 24 text

“ ” #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

Slide 25

Slide 25 text

#dartlang Shadow DOM of a Video-Tag

Slide 26

Slide 26 text

#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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

#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

Slide 30

Slide 30 text

#dartlang Filters

Slide 31

Slide 31 text

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

    Slide 32

    Slide 32 text

    #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

    Slide 33

    Slide 33 text

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

    Slide 34

    Slide 34 text

    #dartlang Services

    Slide 35

    Slide 35 text

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

    Slide 36

    Slide 36 text

    #dartlang Thank you [email protected] @nikgraf

    Slide 37

    Slide 37 text

    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