Mapping Apps w/ Angular JS - Amazon S3 · Angular JS Thing... Angular is the only production-ready...
Transcript of Mapping Apps w/ Angular JS - Amazon S3 · Angular JS Thing... Angular is the only production-ready...
![Page 1: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/1.jpg)
Mapping Appsw/ Angular JSPatrick Arlt
Experience Developer - Esri Portland R&D Center
- @patrickarlt http://bit.ly/1cGPDLf
![Page 2: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/2.jpg)
![Page 3: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/3.jpg)
![Page 4: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/4.jpg)
![Page 5: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/5.jpg)
directives?
transclusion?
![Page 6: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/6.jpg)
![Page 7: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/7.jpg)
WebComponentsExtend the vocabulary of HTML
Shadow DOM
HTML Templates
Custom Elements
HTML Imports
![Page 8: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/8.jpg)
<!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.arcgi </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>
![Page 9: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/9.jpg)
So ThisAngular JSThing...Angular is the only production-ready way to do ANYTHINGlike Web Components
Angular also has a TON of features for building web apps
![Page 10: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/10.jpg)
Angular JSFeatures
Data Binding Controller Plain JavaScript
Deep Linking Form Validation ServerCommunication
Directives ReusableComponents
Localization
Embeddable Injectable Testable
![Page 11: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/11.jpg)
My First Angular App - Map Attack
~275 lines of code - http://mapattack.org
![Page 12: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/12.jpg)
How AngularJS Works
![Page 13: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/13.jpg)
How Angular Works - App
Angular has its own system for scoping and namespaceingmodules.
var app = angular.module('todo', []);
<div ng-app="todo"> ...</div>
![Page 14: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/14.jpg)
How Angular Works - Controllers and$scope
$scope represents our "Model" and how we interact withour 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/
![Page 15: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/15.jpg)
How Angular Works - Expressions
Expressions are simple code peices that Angular can parseand evaluate
{{ title }} is an expression.
So is {{ "Angular Says " + title }}
Expressions are ALWAYS evaluated against the current$scope
![Page 16: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/16.jpg)
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/
![Page 17: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/17.jpg)
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/
![Page 18: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/18.jpg)
How doesAngular know
the scopechanged!?!?!
![Page 19: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/19.jpg)
How Angular Works - Dirty Checking
Angular compares the new $scope the old $scope
If $scope changed, directives will handle changing theDOM
http://stackoverflow.com/questions/9682092/databinding-in-angularjs
![Page 20: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/20.jpg)
How doesAngular know
when to dodirty checking?
![Page 21: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/21.jpg)
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/
![Page 22: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/22.jpg)
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);}
![Page 23: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/23.jpg)
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/
![Page 24: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/24.jpg)
One last $scope.$applyexample
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 theSCOPE
![Page 25: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/25.jpg)
A SimpleAngular App
http://jsfiddle.net/patrickarlt/LS2Vp/4/
![Page 26: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/26.jpg)
I thought this was aboutmaps...
![Page 27: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/27.jpg)
Fine.Lets Make
<esri-map>
![Page 28: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/28.jpg)
But first wehave to makeAngular and
Dojo play nice
![Page 29: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/29.jpg)
The GoodAngular hasmodules
Dojo hasmodules
They will worktogather
The BadAngular wants tomanagesmoduleinitalization viadependencyinjection
Dojo wants tomanage moduleloading via AMD
The UglyNo good docson combiningthe modulesystems
Most examplesare overlycomplex orbroken
Angular JS + JS API Setup on GitHub
![Page 30: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/30.jpg)
CustomDirectives
Warning! Writing your own directives are a HUGE topic!
<div ng-controller="MapCtrl"> <esri-map id="map" center="-73.97163391113281,40.705790602242 <esri-feature-layer url="http://services.arcgis.com/rOo16Hd <esri-feature-layer url="http://services.arcgis.com/rOo16Hd </esri-map></div>
| esri-map esri-feature-layer
![Page 31: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/31.jpg)
Putting AllTogather
Final Demo
![Page 32: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/32.jpg)
![Page 33: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/33.jpg)
![Page 34: Mapping Apps w/ Angular JS - Amazon S3 · 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](https://reader030.fdocuments.us/reader030/viewer/2022011807/5c1178a909d3f2423a8c1dcf/html5/thumbnails/34.jpg)