arcgis api for javascript: building apps with angular · 2020-04-30 · javascript" angular...

ArcGISAPIforJavaScript:BuildingappsforAngularANDYGUP ALLISONDAVIS

@agup @araedavis

What'stheplantoday?LearnhowtouseArcGISAPIforJavaScriptwithAngularCLIArcGISAPIforJavaScriptmoduleswithesri-loaderAsyncpatternsAngularComponentDevKit(CDK)ServicesRoutingStatemanagementArcGISAPIforJavaScriptmoduleswithwebpack

Angular6+

ArcGISAPIforJavaScript4.x

https://github.com/Esri/angular-cli-esri-map

Gettingstarted1.Downloadourrepo

2.FollowalongasweworkwithAngularsampleapps

./sample_apps/app-scaffolding

./sample_apps/esri-loader

...andmore...

https://github.com/andygup/angular-plus-arcgis-javascript-ds2020

Basicbuildingblocks

AngularCLI

"esri-loader"

esri­map.component.ts

AppScaffolding

Reliablyload(orlazyload)ArcGISmodulesusingourAMDloader

ControlwhichArcGISmoduleswhen/whereyouwant,àlacarte

It'sEASYandverylightweight

esri-loader

Sampleapplication

esri-loaderimportloadModulesfrom'esri­loader';//`loadModules`dynamicallyinjectsa<script>tagontothepage

//UsePromise­basedpatternloadModules(['esri/Map','esri/views/MapView','esri/Graphic']).then(([EsriMap,EsriMapView,Graphic])=>//AnyArcGISJavaScriptcodehere);

//Or,useasync/awaitpatternasyncinitializeMap()const[Map,MapView,Graphic]:any=awaitloadModules(['esri/Map','esri/views/MapView','esri/Graphic]).catch(err=>console.error('ArcGIS:',err);

:"atypedsupersetofJavaScriptthatcompilestoplainJavaScript"

AngularusesTypeScriptasaprimarylanguageforappdevelopment

EsriprovidestypedenitionsfortheArcGISAPIforJavaScript:

AdditionalTypeScriptresources:

Typesforarcgis-js-apiTypeScript

npminstall­­save@types/arcgis­js­api

Angular'sTScongguideEsri'sTypeScriptsetupguide

AsynchronousOperationsThreewaystomanageoutofprocess,outofsequenceoperations:

PromisesCustomEvents

RxJSObservables

Async:Promises

Async:Events

RxJSandObservables(ReactiveExtensionsforJavaScript)-alibraryforreactive

programming

AngularusesobservablesviaRxJStohandlemanycommonasyncoperations:

Underthehood,

RxJS

HTTPReactiveforms

Router

AngularcustomeventsextendstheRxJSSubject

Async:Observablesthis.formSubscription=this.wonderForm.valueChanges.subscribe(value=>//dosomethingcoolwithourupdatedformvalue!)

//don'tforgettocleanupanysubscriptionsngOnDestroy()this.formSubscription.unsubscribe()

AngularComponentDeveloperKit(CDK)

AuthoredbytheAngularteamImplementscommoninteractionpatternsandcomponentsUnopinionatedaboutpresentation

builtontopofCDKAngularMaterial

AccessibilityandresponsivenessworkoutoftheboxDevelopershavefullcontrol-customstyles,sorting,paginationcanbeaddedontopTabletemplateanddatasourceexistindependentlyofeachother

AngularCDKdemo

AngularStateManagementApplicationstateComponentstateSharedstateRouterstate

Ohsomanychoices...!

NeedtomaintainstateaswechangeroutesCanuseaserviceandRxJStomaintainthestate

SimplemapstatewithRxJS

Scalableapproachtomaintainingapplicationstate

NgRxDataStore

Angular+@arcgis/webpack-plugin

Angular8and9ArcGISAPIforJavaScript4.7+onlyCongurewebpackusingbuildersangular-builders/custom-webpack

https://github.com/Esri/angular-cli-esri-map/tree/arcgis-webpack-angular

https://www.npmjs.com/package/@angular-builders/custom-webpack

@arcgis/webpack-plugin

@angular-builders/custom-webpack

Customizebuildcongwithoutejectingwebpack//angular.json­customconfiguration"build":"builder":"@angular­builders/custom­webpack:browser","options":"customWebpackConfig":"path":"./extra­webpack.config.js",...

extra-webpack.cong.jsconstArcGISPlugin=require('@arcgis/webpack­plugin');/***ConfigurationitemsdefinedherewillbeappendedtotheendoftheexistingwebpaCLI.*/module.exports=plugins:[newArcGISPlugin()],node:process:false,global:false,fs:"empty",devtool:'eval'

InitializetheMapimportMapfrom"esri/Map";importMapViewfrom"esri/views/MapView";ngOnInit()this._map=newMap(basemap:this._basemap);this._view=newMapView(container:this.mapViewEl.nativeElement,map:this._map);

WorkingwithsecureservicesDOMException:Failedtoexecute'importScripts'on'WorkerGlobalScope'

https://github.com/Esri/arcgis-webpack-plugin#usage

ResourcesPresentationGitHubrepoArcGISAPIforJavaScriptUsingtheArcGISAPIforJavaScriptwithAngular:Guideesri-loaderarcgis-webpack-pluginSampleArcGISJSAPI/AngularCLIapplicationGeoNet:ArcGISAPIforJavaScriptCommunityGISStackExchange

ThankyouANDYGUP

ALLISONDAVIS

@agup

@araedavis