Declarative Mapping Applications with AngularJS › library › userconf › devsummit... ·...
Transcript of Declarative Mapping Applications with AngularJS › library › userconf › devsummit... ·...
![Page 1: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/1.jpg)
Dave Bouwman - @dbouwmanTom Wayson - @TomWayson
Declarative Mapping Applications with AngularJS
![Page 2: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/2.jpg)
Angular
![Page 3: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/3.jpg)
<declarative />
![Page 4: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/4.jpg)
{{data-binding}}
![Page 5: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/5.jpg)
test-all-the-things
![Page 6: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/6.jpg)
dependency injection
![Page 7: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/7.jpg)
super popular
![Page 8: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/8.jpg)
![Page 9: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/9.jpg)
![Page 10: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/10.jpg)
big ecosystem
![Page 11: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/11.jpg)
“forms-over-data”
![Page 12: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/12.jpg)
![Page 13: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/13.jpg)
Not So Much…
![Page 14: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/14.jpg)
![Page 15: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/15.jpg)
Big in “the enterprise”
“enterprise”
![Page 16: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/16.jpg)
Big in “the enterprise”
Visual Studio Tools
![Page 17: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/17.jpg)
![Page 18: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/18.jpg)
Choosing a JS FrameworkFriday 1pm Primrose B
![Page 19: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/19.jpg)
ng @ Esri
![Page 20: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/20.jpg)
![Page 21: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/21.jpg)
![Page 22: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/22.jpg)
![Page 23: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/23.jpg)
![Page 24: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/24.jpg)
maps are awesome
80497449@N04/8280671002
![Page 25: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/25.jpg)
component in a system
no3rdw/4731781962
![Page 26: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/26.jpg)
adding maps to ng-apps
no3rdw/4731781962
![Page 27: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/27.jpg)
<directive>
![Page 28: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/28.jpg)
![Page 29: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/29.jpg)
![Page 30: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/30.jpg)
Wrap Angular in Dojo
![Page 31: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/31.jpg)
Make JSAPI work in Angular
![Page 32: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/32.jpg)
<esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/0" />
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/1" />
</esri-map>
![Page 33: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/33.jpg)
<esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/0" />
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/1" />
</esri-map>
Map Directive
![Page 34: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/34.jpg)
Let’s go further…
![Page 35: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/35.jpg)
<esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/0" />
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/1">
<renderer field="area" type="class-breaks">
<break min="0" max="50">
<symbol linecolor="#ff0044" fillcolor="#ff0044">
</break>
<break min="51" max="150">
<symbol linecolor="#cc0044" fillcolor="#cc0044">
</break>
<break min="151" max="500">
<symbol linecolor="#aa0044" fillcolor="#aa0044">
</break>
</renderer></esri-feature-layer>
</esri-map>
![Page 36: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/36.jpg)
<esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/0" />
<esri-feature-layer url="http://services.arcgis.com/.../FeatureServer/1">
<renderer field="area" type="class-breaks">
<break min="0" max="50">
<symbol linecolor="#ff0044" fillcolor="#ff0044">
</break>
<break min="51" max="150">
<symbol linecolor="#cc0044" fillcolor="#cc0044">
</break>
<break min="151" max="500">
<symbol linecolor="#aa0044" fillcolor="#aa0044">
</break>
</renderer></esri-feature-layer>
</esri-map>
25 types of layers10 renderers
9 types of symbols100s of events
![Page 37: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/37.jpg)
It’s… It’s… XML??!
![Page 38: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/38.jpg)
Directives exposing the entire Esri JS API?
No.
![Page 39: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/39.jpg)
Directives exposing the entire Esri Leaflet API?
No.
![Page 40: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/40.jpg)
Facilitate creating custom directives?
Yes!
![Page 41: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/41.jpg)
What do you need?http://github.com/esri/angular-esri-map
![Page 42: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/42.jpg)
angular-esri-mapesri
![Page 43: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/43.jpg)
angular-esri-map: How does it work?
<script type="text/javascript" src="http://js.arcgis.com/3.12compact"></script>
<script src="libs/angularjs/1.2.16/angular.js"></script>
<script src="libs/angular-esri-map.js"></script>
<script type="text/javascript">
angular.module('app', ['esri.map']);
</script>
See the Quick Start
![Page 44: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/44.jpg)
angular-esri-map: Using the Directives
<esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo"> </esri-map>
angular.module('app').controller('MyController', function($scope) {
$scope.map = {
center: { lng: -122.45, lat: 37.75 },
zoom: 13
}; });
See the Examples
![Page 45: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/45.jpg)
Building Apps
![Page 46: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/46.jpg)
Regional View of Sites
Floor Plan Map
Site Map
Real World App: Facilities Management Application
![Page 47: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/47.jpg)
Map Legend
RendererLayer VisibilityDefinition Query
Layer Selection
Get Layer Features
Feature Layers
Real World App: Gap Analysis
![Page 48: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/48.jpg)
Option 1: Use the Backdoor
<esri-map id="floorPlan" center="map.center" zoom="map.zoom" load="mapLoaded">
<esri-feature-layer title=“Floor Plan Lines" url="..."></esri-feature-layer>
<esri-feature-layer title=“Spaces" url="..."></esri-feature-layer>
<div esri-legend target-id="legend"></div>
</esri-map>$scope.mapLoaded = function(map) {
// get references to the feature layers and
// bind their visibility, definitions, selections,
// and renderers to scope properties
};
![Page 49: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/49.jpg)
Option 2: Fill the Gaps
<esri-map id="floorPlan" center="map.center" zoom="map.zoom">
<esri-feature-layer title=“Floor Plan Lines" url="..."
visible="lines.show"></esri-feature-layer>
<esri-feature-layer title=“Spaces" url="..."
definition-query="spaces.definitionQuery"
selection-query="spaces.selectionQuery"
renderer="spaces.renderer"
update-end="spacesUpdated"></esri-feature-layer>
<div esri-legend target-id="legend"></div>
</esri-map>
Pull requests welcome!
![Page 50: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/50.jpg)
Option 3: Roll Your Own
<floor-plan-map id="floorPlanMap"
floor-id="spaces.floorId"
type="spaces.occupancy"
show-lines="lines.show">
<div esri-legend target-id="legend"></div>
</floor-plan-map>
Definition QueryRendererVisibility
![Page 51: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/51.jpg)
Demo: Parcel Map
http://tomwayson.github.io/angular-parcel-map/
![Page 52: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/52.jpg)
Parcel Map: Directive API
<parcel-map id="map" parcel-id="{{parcel.id}}"selection-complete="onParcelSelected"></parcel-map>
angular.module('app').controller('MyController', function($scope) {
$scope.parcel = {
id: '1919377002'
};
$scope.onParcelSelected = function(e) {
$scope.selectedParcel = e.features[0];
}; });
![Page 53: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/53.jpg)
<esri-map /> Directive: Attribute Binding
// isoloate scope
scope: {
// two-way attribute binding
center: '=?',
zoom: '=?',
// one-way attribute binding
basemap: '@',
// function binding for events
load: '&'
}, ...
// in controller:
require(['esri/map'], function(Map) {
var map = new Map($attrs.id, {
center: [$scope.center.lng, $scope.center.lat],
zoom: $scope.zoom,
basemap: $scope.basemap
}); ...$scope.$watch('basemap', function(nVal, oVal)
{
map.setBasemap(nVal);
});
});
![Page 54: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/54.jpg)
<esri-map /> Directive: Event Binding
// isoloate scope
scope: {
// two-way attribute binding
center: '=?',
zoom: '=?',
// one-way attribute binding
basemap: '@',
// function binding for events
load: '&'
}, ...
// in controller:
require(['esri/map'], function(Map) {
...
map.on('load', function() {
$scope.$apply(function() {
$scope.load()(map);
});
});
});
![Page 55: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/55.jpg)
<parcel-map /> Directive: Attribute Binding
// isoloate scope
scope: {
// one-way attribute binding
parcelId: '@',
// function binding for events
selectionComplete: '&'
}, ...
// in controller:
require(['esri/map','esri/layers/FeatureLayer', …],
function(Map, FeatureLayer, …) {
var map = new Map($attrs.id);
var parcels = new FeaturLayer('http://…', {…});
// add basemap and feature layer to map, etc
$scope.$watch('parcelId', function(nVal, oVal) {
// select feature by parcel id and zoom to it
});
});
![Page 56: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/56.jpg)
<parcel-map /> Directive: Event Binding
// in controller:
require(['esri/map','esri/layers/FeatureLayer', …],
function(Map, FeatureLayer, …) {
...
parcels.on('selection-complete', function(feat) {
$scope.$apply(function() {
$scope.selectionComplete()(e);
});
});
});
// isoloate scope
scope: {
// one-way attribute binding
parcelId: '@',
// function binding for events
selectionComplete: '&'
}, ...
See the Source
![Page 57: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/57.jpg)
Rate This Sessionwww.esri.com/RateMyDevSummitSession
![Page 58: Declarative Mapping Applications with AngularJS › library › userconf › devsummit... · 2015-04-23 · Declarative Mapping Applications with AngularJS, 2015 Esri International](https://reader030.fdocuments.us/reader030/viewer/2022013021/5f0d55897e708231d439d574/html5/thumbnails/58.jpg)