Want to dive even deeper?

Take the course Building a Road Using Civil 3D by Seth Cohen and become an expert!
Building a Road Using Civil 3D
by Seth Cohen

Check it out!
You're watching a preview of this video, click the button on the left to puchase the full version from Atomikos ExtremeTransactions Certification.

Angular on Dart

Learn how to build "heroic" apps with Angular and Dart. Use Dart's structured language and libraries with Angular's components and data binding. See real code and examples that blend the best of Dart and Angular. This session is for any developer that wants to build for the web with productive tools, familiar language, and modern web frameworks.


Published on
  • 3.293
  • 7
  • 2
  • 16
  • 0
  • JFokus 2014 #dartlang #angular
  • Jasmine Docs PhantomJS Docs dest templates Docs moment.js Docs "I justwant to "Hi, I want to build aweb write web apps!" app" Modernizr Docs jQuery Docs Backbone Marionette Docs Backbone Docs require.js Docs #dartlang #angular
  • Packages "Things are consistent and clear." Intl Angular Unit test Dart SDK #dartlang #angular
  • "We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google #dartlang
  • Lightning Tour #dartlang #angular
  • #dartlang #angular
  • #dartlang #angular
  • Dart Principles Productivity Performance Scalability #dartlang #angular
  • #dartlang #angular
  • #dartlang #angular
  • Tree shaking imports main baz Library calls foo bar boo dart2js main foo bar #dartlang #angular
  • Simple syntax, ceremony free class Hug { Familiar #dartlang #angular
  • Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Terse #dartlang #angular
  • Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { Operator overriding return new Hug(strength + other.strength); } #dartlang #angular
  • Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... Named, optional params w/ default value } #dartlang #angular
  • Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } One-line function String toString() => "Embraceometer reads $strength"; } #dartlang #angular
  • Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String interpolation String toString() => "Embraceometer reads $strength"; } #dartlang #angular
  • Simple syntax, ceremony free main() { var hug = new Hug(10); } #dartlang #angular
  • Simple syntax, ceremony free main() { var hug = new Hug(10); var bigHug = hug + new Hug(100); } #dartlang #angular
  • Simple syntax, ceremony free main() { var hug = new Hug(10); var bigHug = hug + new Hug(100); bigHug.patBack(hands: 2); } #dartlang #angular
  • Simple syntax, ceremony free main() { var hug = new Hug(10); var bigHug = hug + new Hug(100); bigHug.patBack(hands: 2); print(bigHug); // Embraceometer reads 110 } #dartlang #angular
  • Method Cascades var button = new ButtonElement(); button.id = 'fancy'; button.text = 'Click Point'; button.classes.add('important'); button.onClick.listen((e) => addTopHat()); parentElement.children.add(button); #dartlang #angular
  • Method Cascades var button = new ButtonElement() ..id = 'fancy' ..text = 'Click Point' ..classes.add('important') ..onClick.listen((e) => addTopHat()); parentElement.children.add(button); #dartlang #angular
  • Callable objects class Registrator { class Registrator { doIt(User user) { … } call(User user) { … } } } var reg = new Registrator(); var reg = new Registrator(); reg.doIt(user); // implied! reg(user); // just call it #dartlang #angular
  • Annotations @Extreme(ftw: true) class Awesome { @upHigh int highFives; } #dartlang #angular
  • Clean semantics and behavior #dartlang #angular
  • Clean semantics and behavior Examples: ● Only true is truthy ● There is no undefined, only null ● No type coercion with ==, + ● Throw error on missing method #dartlang #angular
  • Scope of this? class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ Lexical this } } #dartlang #angular
  • Scalable structure library games; import 'dart:math'; import 'players.dart'; Packages class Darts { Libraries Functions Classes // ... } class Bowling { // ... } Mixins Interfaces Player findOpponent(int skillLevel) { // ... } #dartlang #angular
  • Scary Async catService.getCatData("cute", (cat) { catService.getCatPic(cat.imageId, (pic) { imageWorker.rotate(pic, 30, (rotated) { draw(rotated); }); 4 levels }); deep! }); #dartlang #angular
  • The Future looks bright catService.getCat("cute") // returns a Future .then((cat) => catService.getCatPic(cat.imageId)) .then((pic) => imageWorker.rotate(pic, 30)) .then((rotated) => draw(rotated)) .catchError((e) => print("Oh noes!")); #dartlang #angular
  • #dartlang #angular
  • Angular Principles Boilerplate D.R.Y. Structure Testability #dartlang #angular
  • Structure: Model-View-Controller <div> <span> <ul> <li> View (DOM) Observes Notifies RAM Model (Dart Objects) Manages Controller (Dart Objects) #dartlang #angular
  • Model: View: Controller: class Person { String name; } <div person> Hi, {{ctrl.person.name}} </div> @NgController( selector: '[person]', publishAs: 'ctrl' ) class Controller { Person person = new Person(); Controller() { person.name = 'Bob'; } } (demo controller) #dartlang #angular
  • Controllers ● Expose model to view ● Handle user interaction ● Update model to change the view #dartlang #angular
  • Expressions ● {{ The stuff inside your markup }} ● Like Dart, but eval'd against the current scope ● No complex logic like loops or throws #dartlang #angular
  • Expression Examples ● person.name ● shoppingCart.total() ● cart.total() - user.discountRate #dartlang #angular
  • Feature: Data Binding hello.dart person.name = 'Bob'; hello.html {{ person.name }} // 1-way <input ng-model='person.name'> // 2-way (demo simple_hello_world) #dartlang #angular
  • Note: Binding for initial page load Markup fine except for first page <p>{{someObj.something}}</p> Use ng-cloak to avoid unstyled content on load <p ng-cloak>{{someObj.something}}</p> Attribute form also avoid unstyled content on load <p ng-bind='someObj.something'></p> (demo simple_hello_world_with_cloak) #dartlang #angular
  • Feature: Directives <div ng-repeat='item in cart.items'> <span ng-bind='item.name'></span> <button ng-click='cart.delete($index)'> Delete </button> </div> (demo repeat_bind_click) #dartlang #angular
  • Note: Directive validation <div data-ng-repeat='item in cart.items'> <span data-ng-bind='item.name'></span> <button data-ng-click='cart.delete($index)'> Delete </button> </div> #dartlang #angular
  • View Templates Directives Markup {{ }} Automatic sanitization Filters #dartlang #angular
  • Feature: automatic sanitization String userInput = "<script>I CAN HAZ XSS</script>" + "<p>I am safe</p>"; querySelector('#contents').innerHtml = userInput; // Result: <div id="contents"> <p>I am safe</p> </div> <!-- No <script> tag --> #dartlang #angular
  • Filters <p>{{ name | reverse }}</p> Filters can take parameters <p>{{ amount | currency:us }}</p> Filters can chain <p>{{ msg | embiggen | shoutify }}</p> #dartlang #angular
  • Filter example: Reverse @NgFilter(name: 'reverse') class Reverser { String call(String input) { if (input == null) return ''; return input.split('').reversed.join(''); } } (demo reverse_filter) #dartlang #angular
  • Feature: Dependency Injection Definition @NgInjectableService() class Users { … } Usage class Login { Users users; Login(this.users); module..type(Users)..type(Login); (demo service_injection) #dartlang #angular
  • Principle: Eliminate boilerplate Dependency Injection PODO Models, Controllers, etc No DOM in most code paths #dartlang #angular
  • Feature: Injectable HTTP client @NgInjectableService() class Users { Http http; [ {"username": "Bob"}, {"username": "Alice"} ] Users(this.http); Future<List<User>> getUsers() { return http.get('users.json').then((resp) { return (resp.data as List).map((u) => new User.fromJson(u)).toList(); }); } } HTTP client aware of response types. (demo http) #dartlang #angular
  • Feature: Routes Left Nav Header Content View #dartlang #angular
  • Routes <ng-view> directive as content placeholder RouteInitializer configures: ● Controller ● Template ● URL #dartlang #angular
  • Routes class AppRouteInitializer implements RouteInitializer { init(Router router, ViewFactory view) { router.root ..addRoute( name: 'overview', path: '/overview', defaultRoute: true, enter: view('views/overview.html')) ..addRoute(name: 'analytics', path: '/analytics', enter: view('views/analytics.html')); } } #dartlang #angular
  • Listening to Route changes @NgDirective( selector: '[active-when-route]' ) class CurrentRoute { Router router; Element element; CurrentRoute(this.element, this.router) { router.onRouteStart.listen((e) { toggleActive(); }); } (demo routing) #dartlang #angular
  • Feature: Components First appearance in AngularDart Controller Template Shadow DOM Custom element name aka "web components light" <components> #dartlang #angular
  • #dartlang #angular
  • Components @NgComponent( selector: 'rating', templateUrl: 'packages/ng_rating/rating.html', cssUrl: 'packages/ng_rating/rating.css', publishAs: 'cmp' ) class RatingComponent { @NgTwoWay('rating') int rating = 0; <rating max-rating="5" rating="item.rating"></rating> (demo rating_angular_component) #dartlang #angular
  • Putting it all together (demo angularpiratebadge) #dartlang #angular
  • Angular and Polymer, sitting in a DOM tree, B-i-n-d-i-n-g. First comes elements, Then comes components, Then comes the interop with the node dot bind. #dartlang #angular
  • Angular directives dependency injection testing support data binding routing server communication Foundation: Shadow DOM, Templates, Custom Elements, ... #dartlang #angular
  • Angular Polymer directives <polymer-element> dependency injection testing support base view data binding layout routing widgets server communication polyfills Foundation: Shadow DOM, Templates, Custom Elements, ... #dartlang #angular
  • #dartlang #angular
  • Resources Tools Docs Libraries Books MySQL Postgres Redis MongoDB ~700 in pub #dartlang #angular
  • <thank-you!> #dartlang #angular
Thumbnail for: Findings Revealed: 2015 State of the Software Supply Chain

Findings Revealed: 2015 State of the Software Supply Chain

WaiMan Yau

free
Thumbnail for: Web Application Security Reloaded for the HTML5 era

Web Application Security Reloaded for the HTML5 era

Carlo Bonamico

free
Thumbnail for: Gimme Caching - The Distributed JCache(JSR107) Way

Gimme Caching - The Distributed JCache(JSR107) Way

David Brimley

free
Thumbnail for: How to lower the power consumption of your app, without affecting performance

How to lower the power consumption of your app, without affecting performance

Rick Schwartz

free
Thumbnail for: Never mind the bollocks: here's the Linux containers

Never mind the bollocks: here's the Linux containers

Patrick Chanezon

free
Thumbnail for: NOW TV and Linear Streaming: The unpredictable scalability challenge

NOW TV and Linear Streaming: The unpredictable scalability challenge

Tom Maule

free
Thumbnail for: The end of server management : hosting has to become a commodity

The end of server management : hosting has to become a commodity

Quentin ADAM

free
Thumbnail for: The Future of Personal Robotics

The Future of Personal Robotics

Nicolas Rigaud

free
Thumbnail for: Performance Tuning, Top 10 Your Doing it Wrong!

Performance Tuning, Top 10 Your Doing it Wrong!

Kirk Pepperdine

free
Thumbnail for: Let’s Get to the Rapids: Java 8 Stream Perfomance

Let’s Get to the Rapids: Java 8 Stream Perfomance

Maurice Naftalin

free
Thumbnail for: Pushing The Limits With Java Enterprise Cloud Development

Pushing The Limits With Java Enterprise Cloud Development

Simon Ritter

free
Thumbnail for: JCP, Adopt-a-JSR & You

JCP, Adopt-a-JSR & You

Heather VanCura

free
Thumbnail for: 3 Keys to Rapid Deployment Success

3 Keys to Rapid Deployment Success

Sven Erik Knop

free
Thumbnail for: Bringing IBM Watson to the Cloud

Bringing IBM Watson to the Cloud

Dale Lane

free
Thumbnail for: The Smartwatch Revolution begins: Developing for Android Wear

The Smartwatch Revolution begins: Developing for Android Wear

Pratik Patel

free
Thumbnail for: The Google Cloud Plaform - Beyond simple use cases

The Google Cloud Plaform - Beyond simple use cases

David Gageot

free
Thumbnail for: The Cloud, an Arduino, an Application, Server, and me - Adventures In and Out of the Cloud

The Cloud, an Arduino, an Application, Server, and me - Adventures In and Out of the Cloud

Holly Cummins

free
Thumbnail for: TestOps - Chasing the White Whale

TestOps - Chasing the White Whale

Ioana Serban

free
Thumbnail for: Experimenting with ServiceWorker

Experimenting with ServiceWorker

Sandro Paganotti

free
Thumbnail for: Accessibility and how to get the most from your screenreader

Accessibility and how to get the most from your screenreader

Edd Sowden

free
Thumbnail for: What Were You Doing In 1995? A 20 Year Retrospective of Java

What Were You Doing In 1995? A 20 Year Retrospective of Java

Simon Ritter , Steve Elliott

free
Thumbnail for: SQL’s back: querying document databases the old fashioned way

SQL’s back: querying document databases the old fashioned way

Matthew Revell

free
Thumbnail for: Decoding the air around you with Java and $7 hardware

Decoding the air around you with Java and $7 hardware

Bert Jan Schrijver

free
Thumbnail for: "Catch me if you can" - Java on wearables

"Catch me if you can" - Java on wearables

Gerrit Grunwald

free
Thumbnail for: Miniboxing: Fast Generics for Primitive Types

Miniboxing: Fast Generics for Primitive Types

Vlad Ureche

free
Thumbnail for: goto java;

goto java;

Martin Skarsaune

free
Thumbnail for: Java 8 in Anger

Java 8 in Anger

Trisha Gee

free
Thumbnail for: Not my department?! How our privacy is broken and what you can do about it.

Not my department?! How our privacy is broken and what you can do about it.

Anna Biselli

free
Thumbnail for: The Hidden Gems of PDF

The Hidden Gems of PDF

Michaël Demey

free
Thumbnail for: Design Patterns in the 21st Century

Design Patterns in the 21st Century

Samir Talwar

free
Thumbnail for: Keynote: The Extraordinary Team of Developers

Keynote: The Extraordinary Team of Developers

Trisha Gee , Daniel Bryant

free
Thumbnail for: Java Generics: Past, Present and Future

Java Generics: Past, Present and Future

Richard Warburton , Raoul-Gabriel Urma

free
Thumbnail for: Building securely with agile

Building securely with agile

Michael Brunton-spall

free
Thumbnail for: STOP BREAKING MY STUFF

STOP BREAKING MY STUFF

Katharine Fitzpatrick

free
Thumbnail for: All Change! How the new economics of Cloud will make you think differently about Java

All Change! How the new economics of Cloud will make you think differently about Java

Steve Poole

free
Thumbnail for: Powering real-time web apps with Hazelcast

Powering real-time web apps with Hazelcast

Andrejs Jermakovics

free
Thumbnail for: What is your build telling you about your application structure?

What is your build telling you about your application structure?

Abraham Marin-Perez

free
Thumbnail for: Practical Challenges of moving from CI to CD using Maven

Practical Challenges of moving from CI to CD using Maven

Jatin Bhadra

free
Thumbnail for: Destination: Cloud. Deploying Applications To The Cloud With Docker

Destination: Cloud. Deploying Applications To The Cloud With Docker

Ryan Baxter

free
Thumbnail for: Finally, Security API JSR 375

Finally, Security API JSR 375

Alex Kosowski

free
Thumbnail for: Level up your Android Build

Level up your Android Build

Volker Leck

free
Thumbnail for: Practical Continuous Deployment

Practical Continuous Deployment

Steve Smith

free
Thumbnail for: The Seven Deadly Sins of Microservices

The Seven Deadly Sins of Microservices

Daniel Bryant

free
Thumbnail for: Making Events for Local Dev Communities

Making Events for Local Dev Communities

Celestino Bellone , Federico Yankelevich

free
Thumbnail for: Nuts and Bolts of WebSocket

Nuts and Bolts of WebSocket

Arun Gupta

free
Thumbnail for: Developing iOS applications with Java and Eclipse

Developing iOS applications with Java and Eclipse

Grant Ronald

free
Thumbnail for: Welcome Keynote

Welcome Keynote

Mark Hazell

free
Thumbnail for: Refactor your Java EE application using Microservices and Containers

Refactor your Java EE application using Microservices and Containers

Arun Gupta

free
Thumbnail for: Java EE 8, a snapshot overview

Java EE 8, a snapshot overview

David Delabassee

free
Thumbnail for: The Dark arts of building your own framework

The Dark arts of building your own framework

Andrey Glaschenko , Konstantin Krivopustov

free
Thumbnail for: Programming at any Scale

Programming at any Scale

Andrew Harmel-Law

free
Thumbnail for: Java is dead, long live Ceylon, Kotlin,…

Java is dead, long live Ceylon, Kotlin,…

Russel Winder

free
Thumbnail for: Android Testing: A New Hope

Android Testing: A New Hope

Zan Markan , Nicholas Jackson

free
Thumbnail for: Java EE changes design pattern implementation

Java EE changes design pattern implementation

Alex Theedom

free
Thumbnail for: Building Cloud Powered Android Apps with Azure

Building Cloud Powered Android Apps with Azure

Chris Risner

free
Thumbnail for: From 0 to 60 million users: Scaling for speed and high availability

From 0 to 60 million users: Scaling for speed and high availability

Aviran Mordo

free
Thumbnail for: HTTP/2 comes to Java. What Servlet 4.0 means to You

HTTP/2 comes to Java. What Servlet 4.0 means to You

David Delabassee

free
Thumbnail for: 50 minutes to develop a full Java EE application with Forge? Is that all?

50 minutes to develop a full Java EE application with Forge? Is that all?

Antonio Goncalves

free
Thumbnail for: How to Rock your Web Apps with Spring and Vaadin

How to Rock your Web Apps with Spring and Vaadin

Sami Ekblad

free
Thumbnail for: In-Memory Computing - Distributed Systems

In-Memory Computing - Distributed Systems

Christoph Engelbert

free
Thumbnail for: Comparing different concurrency models on the JVM

Comparing different concurrency models on the JVM

Mario Fusco

free
Thumbnail for: 5 reasons why developers should pay attention to robotics

5 reasons why developers should pay attention to robotics

Nicolas Rigaud

free
Thumbnail for: Ceylon from here to infinity: the big picture and what's coming

Ceylon from here to infinity: the big picture and what's coming

Stephane Epardaud

free
Thumbnail for: Is your profiler speaking the same language as you?

Is your profiler speaking the same language as you?

Simon Maple

free
Thumbnail for: Java 9: Make Way for Modules!

Java 9: Make Way for Modules!

Mark Reinhold

free
Thumbnail for: Akka Streams with Scala and Java

Akka Streams with Scala and Java

Jamie Allen

free
Thumbnail for: The 10 Golden Rules of Mobile UX

The 10 Golden Rules of Mobile UX

Emilia Ciardi

free
Thumbnail for: Ludicrously Fast Builds with Buck

Ludicrously Fast Builds with Buck

Simon Stewart

free
Thumbnail for: Making Enterprise Java Architecture Sustainable

Making Enterprise Java Architecture Sustainable

Markus Eisele

free
Thumbnail for: Combining R with Java for Data Analysis

Combining R with Java for Data Analysis

Ryan Cuprak , Elsa Cuprak

free
Thumbnail for: Diversity Rules!

Diversity Rules!

Amali de Alwis

free
Thumbnail for: Flyway - Database Migration made easy

Flyway - Database Migration made easy

Axel Fontaine

free
Thumbnail for: Microservices Made Easy with Spring Cloud and Netflix OSS

Microservices Made Easy with Spring Cloud and Netflix OSS

David Syer

free
Thumbnail for: CDI 2.0: what is in the work?

CDI 2.0: what is in the work?

Antoine Sabot-Durand , José Paumard

free
Thumbnail for: WildFly 9

WildFly 9

Kabir Khan

free
Thumbnail for: Functional patterns for scala beginners

Functional patterns for scala beginners

Clément Delafargue

free
Thumbnail for: Devoxx4Kids

Devoxx4Kids

Dan Hardiker

free
Thumbnail for: Let’s Get to the Rapids: Java 8 Stream Perfomance

Let’s Get to the Rapids: Java 8 Stream Perfomance

Maurice Naftalin

free
Thumbnail for: Level Up your Dev Skills with Static Analysis

Level Up your Dev Skills with Static Analysis

David Lindsay

free
Thumbnail for: From Requirements to Deployment: Implementing a Microservice in Java using BDD and TDD

From Requirements to Deployment: Implementing a Microservice in Java using BDD and TDD

John Ferguson Smart

free
Thumbnail for: Predicting the Future with Machine Learning

Predicting the Future with Machine Learning

Amy Nicholson

free
Thumbnail for: Software Architecture as Code

Software Architecture as Code

Simon Brown

free
Thumbnail for: Top 10 Real-life WebSocket Use Cases and Experiences

Top 10 Real-life WebSocket Use Cases and Experiences

Richard Cullen

free
Thumbnail for: The First IoT JSR: Units of Measurement

The First IoT JSR: Units of Measurement

Leonardo Lima , Chris Senior

free
Thumbnail for: One Framework, No Dependencies: Using Frameworks to Avoid Common Pitfalls of App Development

One Framework, No Dependencies: Using Frameworks to Avoid Common Pitfalls of App Development

Lee Boonstra

free
Thumbnail for: Building the UKs biggest IoT network

Building the UKs biggest IoT network

Romanas Sonkinas

free
Thumbnail for: Never Mind the Devoxx

Never Mind the Devoxx

David Blevins

free
Thumbnail for: Five Ways to Not Suck at Being a Java Freelancer

Five Ways to Not Suck at Being a Java Freelancer

Roberto Cortez

free
Thumbnail for: Java EE Game Changers

Java EE Game Changers

David Blevins

free
Thumbnail for: Express yourself with Java 8

Express yourself with Java 8

Benjamin Weber

free