Mapping Apps w/ Angular JS – Patrick Arlt

View Github Repository Open presentation in a new window

patrickarlt

See all presentation from patrickarlt

Mapping Apps w/ Angular JS – Patrick Arlt

11 20

dev-summit-talk-angular-js

Talk about Angular JS and Mapping Applications at Dev Summit 2014

On Github patrickarlt / dev-summit-talk-angular-js

Mapping Apps w/ Angular JS

Patrick Arlt

Experience Developer - Esri Portland R&D Center

@patrickarlt - http://bit.ly/1cGPDLf

Or How I Learned to Stop Worrying and Love Angular JS

Angular JS is amazing!

  • directives?
  • transclusion?
  • HTML compilation?
  • providers?
  • injectors?
  • disgest cycle?
  • indigestion?

Web Components

Extend the vocabulary of HTML

  • Shadow DOM
  • HTML Templates
  • Custom Elements
  • HTML Imports

https://www.youtube.com/watch?v=fqULJBBEVQE#t=177

<!DOCTYPE html>
<html>
	<head>
		<title>Mind Blown</title>
		<link rel="import" href="esri-maps.html">
	</head>
	<body>
		<esri-map id="map"center="45.528, -122.680" zoom="15">
			<esri-feature-layer id="parks" url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Parks_pdx/FeatureServer/0" <esri-feature-layer>
		</esri-map>

		<script type="text/javascript">
			var map = document.getElementById("map");

			map.on("click", function(e){
				console.log("map was clicked on");
			});

			var parks = document.getElementById("parks");

			parks.on("click", function(feature){
				console.log("you clicked on " + feature.name);
			});
		</script>
	</body>
</html>

So This Angular JS Thing...

Angular is the only production-ready way to do ANYTHING like Web Components

Angular also has a TON of features for building web apps

Angular JS Features

  • Data Binding
  • Controller
  • Plain JavaScript
  • Deep Linking
  • Form Validation
  • Server Communication
  • Directives
  • Reusable Components
  • Localization
  • Embeddable
  • Injectable
  • Testable

My First Angular App - Map Attack

~275 lines of code - http://mapattack.org

How Angular JS Works

How Angular Works - App

Angular has its own system for scoping and namespaceing modules.

var app = angular.module('todo', []);
<div ng-app="todo">
  ...
</div>

How Angular Works - Controllers and $scope

$scope represents our "Model" and how we interact with our data

Controllers bind our $scope to chunks of DOM

<div ng-app>
	<div ng-controller="MainCtrl">
		{{title}}
	</div>
</div>
function MainCtrl($scope){
	$scope.title = "Hello World";
}
http://jsfiddle.net/patrickarlt/qv2v5/

How Angular Works - Expressions

Expressions are simple code peices that Angular can parse and evaluate

  • {{ title }} is an expression.
  • So is {{ "Angular Says " + title }}
  • Expressions are ALWAYS evaluated against the current $scope

How Angular Works - Directives

Directives tell Angular HOW to bind $scope to the DOM

<div ng-app="">
    <div ng-controller="MainCtrl">
        <h1 ng-class="{big: isBig}">{{title}}</h1>
    </div>
</div>
function MainCtrl($scope){
    $scope.isBig = true;
    $scope.title = "Hello World"
}
http://jsfiddle.net/patrickarlt/5CRkr/1/

How Angular Works - Data Binding

Bind data from $scope to DOM and vica-versa

<div ng-app="">
    <div ng-controller="MainCtrl">
        <input type="text" ng-model="title">
        <h1>{{title}}</h1>
    </div>
</div>
function MainCtrl($scope){
    $scope.title = "Hello World"
}
http://jsfiddle.net/patrickarlt/w3ZU3/

How does Angular know the scope changed!?!?!

How Angular Works - Dirty Checking

Angular compares the new $scope the old $scope

If $scope changed, directives will handle changing the DOM

http://stackoverflow.com/questions/9682092/databinding-in-angularjs

How does Angular know when to do dirty checking?

How Angular Works - Digest Loop

First lets break Angular…

<div ng-app>
  <div ng-controller="MainCtrl">
    <h1>{{title}}</h1>
  </div>
</div>
function MainCtrl($scope){
  $scope.title = "Hello World"

  setTimeout(function(){
    $scope.title = "Angular is Magic!";
  }, 500);
}
http://jsfiddle.net/patrickarlt/u5T9v/

How Angular Works - $scope.$apply

Tells Angular you are changing the $scope.

<div ng-app>
  <div ng-controller="MainCtrl">
      <h1>{{title}}</h1>
  </div>
</div>
function MainCtrl($scope){
  $scope.title = "Hello World"

  setTimeout(function(){
    $scope.$apply(function(){
      $scope.title = "Angular is Magic!";
    });
  }, 500);
}
http://jsfiddle.net/patrickarlt/JRvnH/

How Angular Works - $scope.$apply

Most of the time you don't have to call $scope.$apply. Just use Angulars helpers.

function MainCtrl($scope, $timeout){
    $scope.title = "Hello World"

    $timeout(function(){
        $scope.title = "Angular is Magic!";
    }, 500);
}
http://jsfiddle.net/patrickarlt/MzjL6/

One last $scope.$apply example

var socket = io.connect('http://api.mapattack.org:8000');

socket.on('data', function(payload){
  $scope.$apply(function(){
		$scope.gameState = payload;
  });
});

Think of $scope.$apply as APPLYING changes to the SCOPE

A Simple Angular App

http://jsfiddle.net/patrickarlt/LS2Vp/4/

I thought this was about maps...

Fine.

Lets Make<esri-map>

But first we have to make Angular and Dojo play nice

The Good

  • Angular has modules
  • Dojo has modules
  • They will work togather

The Bad

  • Angular wants to manages module initalization via dependency injection
  • Dojo wants to manage module loading via AMD

The Ugly

  • No good docs on combining the module systems
  • Most examples are overly complex or broken

Custom Directives

Warning! Writing your own directives are a HUGE topic!

<div ng-controller="MapCtrl">
  <esri-map id="map" center="-73.97163391113281,40.70579060224226" zoom="14" basemap="topo" onclick="click">
    <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/NYC_Police_Precincts/FeatureServer/0"></esri-feature-layer>
    <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Graffiti_Locations3/FeatureServer/0"></esri-feature-layer>
  </esri-map>
</div>

esri-map | esri-feature-layer

Putting All Togather

Final Demo

Except For…

  • Testing
  • Animations
  • Routing
  • Services
  • Filters
  • Dependency Injection
  • And some other stuff...

Want More?

Working with JavaScript App Frameworks and ArcGIS API for JavaScript

4:00pm - 5:00pm - Today - Smoketree A-E

Backbone, Polymer, Web Components, Angular

Thanks!

Twitter : @patrickarlt

Slides : http://bit.ly/1cGPDLf