AngularDart Introduction

37
#dartlang

TAGS:

description

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 of AngularDart Introduction

Page 1: AngularDart Introduction

#dartlang

Page 2: AngularDart Introduction

#dartlang

[email protected]

www.nikgraf.com

nikgraf

Nik Graf

http://www.example.com
Page 3: AngularDart Introduction

#dartlang

♡

Page 4: AngularDart Introduction

AngularDart is AngularJS’ new sibling

Page 5: AngularDart Introduction

“”

#dartlang

Brad Green

Our goal is that there will be a single framework with your choice of language.

Page 6: AngularDart Introduction

Angular Concepts

Page 7: AngularDart Introduction

#dartlang

Extend HTML

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

!

!

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

Page 8: AngularDart Introduction

Dependency Injection

Page 9: AngularDart Introduction

#dartlang

Dependency Injection

//  hard  coded  dependency  class  SomeClass()  {          this.myObject  =  new  MyClass();  }  !

//  dependency  injection  class  SomeClass  (MyClass  myObject)  {          this.myObject  =  myObject;  }

Page 10: AngularDart Introduction

Built with Testing in Mind

Page 11: AngularDart Introduction

#dartlang

Application Skeleton

Page 12: AngularDart Introduction

#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

Page 13: AngularDart Introduction

#dartlang

import  'package:angular/angular.dart';  @MirrorsUsed(override:  '*')  import  'dart:mirrors';  !

main()  =>  ngBootstrap();

main.dart

Page 14: AngularDart Introduction

#dartlang

A Simple App

Page 15: AngularDart Introduction

#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

Page 16: AngularDart Introduction

Building Blocks !

Controllers Components Directives Filters Services

Page 17: AngularDart Introduction

#dartlang

Controllers

Page 18: AngularDart Introduction

#dartlang

<div  recipe-­‐book>      <ul>          <li  ng-­‐repeat="recipe  in  ctrl.recipes">              {{recipe.name}}          </li>      </ul>  </div>

index.html

Page 19: AngularDart Introduction

#dartlang

class  RecipeBookController  {  !

   List<Recipe>  recipes;  !

   RecipeBookController()  {          recipes  =  _loadData();      }  !

   List<Recipe>  _loadData()  {          return  [  new  Recipe('My  Appetizer',                      ["Ingredient  1",  "Ingredient  2"])  ];      }  }

recipe_book.dart

Page 20: AngularDart Introduction

#dartlang

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

recipe_book.dart

Page 21: AngularDart Introduction

#dartlang

class  MyAppModule  extends  Module  {      MyAppModule()  {          type(RecipeBookController);      }  }  !

main()  {      ngBootstrap(module:  new  MyAppModule());  }

main.dart

Page 22: AngularDart Introduction

#dartlang

Components

Page 23: AngularDart Introduction

#dartlang

<rating  rating=“3”></rating>  

index.html

Page 24: AngularDart Introduction

“”

#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

Page 25: AngularDart Introduction

#dartlang

Shadow DOM of a Video-Tag

Page 26: AngularDart Introduction

#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

Page 27: AngularDart Introduction

#dartlang

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

rating_component.dart

Page 28: AngularDart Introduction

#dartlang

class  MyAppModule  extends  Module  {  !

   MyAppModule()  {          type(RecipeBookController);          type(RatingComponent);      }  }  !

main()  {      ngBootstrap(module:  new  MyAppModule());  }  

main.dart

Page 29: AngularDart Introduction

#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

Page 30: AngularDart Introduction

#dartlang

Filters

Page 31: AngularDart Introduction

#dartlang

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

index.html

Page 32: AngularDart Introduction

#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

Page 33: AngularDart Introduction

#dartlang

<li  ng-­‐repeat="recipe  in  ctrl.recipes  |  orderBy:'name'  |  categoryfilter:ctrl.categoryFilterMap">      {{  name  }}  </li>

index.html

Page 34: AngularDart Introduction

#dartlang

Services

Page 35: AngularDart Introduction

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

!

Page 36: AngularDart Introduction

#dartlang

Thank you

[email protected]

@nikgraf

http://www.example.com
Page 37: AngularDart Introduction

Resources

#dartlang

Siblingshttps://www.flickr.com/photos/swambo/13830270395

Building Blockshttps://www.flickr.com/photos/tinker-tailor/4161713573

Blueprinthttps://www.flickr.com/photos/wscullin/3770015203

Construction Sitehttp://commons.wikimedia.org/wiki/File:QV_Building_construction_site,_Melbourne_-_March_2002.jpg


Introduction: Definition Introduction: Philosophy

Introduction: Definition Introduction: Philosophy

PRODUCT INTRODUCTION Company Introduction

PRODUCT INTRODUCTION Company Introduction

Introducción / Introduction / Introduction

Introducción / Introduction / Introduction

Introduction to Transducers, Introduction to Transducers ...engtech.weebly.com/.../more_on_transducers_sensors_actuators.pdf · Introduction to Transducers, Introduction to Transducers,

Introduction to Transducers, Introduction to Transducers ...engtech.weebly.com/.../more_on_transducers_sensors_actuators.pdf · Introduction to Transducers, Introduction to Transducers,

Introduction€¦ · Introduction ThisdocumentprovidesinformationabouttheIOSXEsoftwarereleasefortheCiscoNCS4201andCisco …

Introduction€¦ · Introduction ThisdocumentprovidesinformationabouttheIOSXEsoftwarereleasefortheCiscoNCS4201andCisco …

Introduction - University of Cambridge · Introduction. Introduction

Introduction - University of Cambridge · Introduction. Introduction

INTRODUCTION SPECIFICATIONS INTRODUCTION

INTRODUCTION SPECIFICATIONS INTRODUCTION

Systems Analysis I introduction I introduction. 2Systems Analysis - Introduction Contents Introduction Introduction 3 classic phases 3 classic phases.

Systems Analysis I introduction I introduction. 2Systems Analysis - Introduction Contents Introduction Introduction 3 classic phases 3 classic phases.

Introduction Introduction (ctnd.)

Introduction Introduction (ctnd.)

Optimisation des Requêtes. Introduction Introduction.

Optimisation des Requêtes. Introduction Introduction.

Introduction | Introduction | Millennium Serials · 2018. 4. 17. · MARC Display | Print | Introduction | Millennium Serials INTRODUCTION Introduction This tutorial introduces the

Introduction | Introduction | Millennium Serials · 2018. 4. 17. · MARC Display | Print | Introduction | Millennium Serials INTRODUCTION Introduction This tutorial introduces the

R as a Web Service Introduction Introduction Introduction

R as a Web Service Introduction Introduction Introduction

Introduction to Databases: Introduction

Introduction to Databases: Introduction

Introduction and Welcome€¦ · Introduction and Welcome Introduction 4

Introduction and Welcome€¦ · Introduction and Welcome Introduction 4

Introduction & Strategy Module Introduction & Administrative

Introduction & Strategy Module Introduction & Administrative

Introduction Section I: Introduction

Introduction Section I: Introduction

An Introduction to NSAn Introduction to NS2An Introduction to NS2 · 2016. 8. 26. · An Introduction to NSAn Introduction to NS2An Introduction to NS2 Textbook: T. Issariyakul and

An Introduction to NSAn Introduction to NS2An Introduction to NS2 · 2016. 8. 26. · An Introduction to NSAn Introduction to NS2An Introduction to NS2 Textbook: T. Issariyakul and

Introduction 1. Introduction

Introduction 1. Introduction

An Introduction to NSAn Introduction to NS2An Introduction ...

An Introduction to NSAn Introduction to NS2An Introduction ...

VisionaryScancombinesarichsetofqualitycontrolandproductivi ... · Introduction Introduction VisionaryScancombinesarichsetofqualitycontrolandproductivityfeatureswithasimpleinterfacedesignedspecificallyforscanningandcodingdepositionexhib-

VisionaryScancombinesarichsetofqualitycontrolandproductivi ... · Introduction Introduction VisionaryScancombinesarichsetofqualitycontrolandproductivityfeatureswithasimpleinterfacedesignedspecificallyforscanningandcodingdepositionexhib-