Your SlideShare is downloading. ×
AngularDart Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

AngularDart Introduction

1,759
views

Published on

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

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
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,759
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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