arcgis api for javascript: building apps with angular · 2020-04-30 · javascript" angular...
TRANSCRIPT
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"
esrimap.component.ts
AppScaffolding
Reliablyload(orlazyload)ArcGISmodulesusingourAMDloader
ControlwhichArcGISmoduleswhen/whereyouwant,àlacarte
It'sEASYandverylightweight
esri-loader
Sampleapplication
esri-loaderimportloadModulesfrom'esriloader';//`loadModules`dynamicallyinjectsa<script>tagontothepage
//UsePromisebasedpatternloadModules(['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
npminstallsave@types/arcgisjsapi
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.jsoncustomconfiguration"build":"builder":"@angularbuilders/customwebpack:browser","options":"customWebpackConfig":"path":"./extrawebpack.config.js",...
extra-webpack.cong.jsconstArcGISPlugin=require('@arcgis/webpackplugin');/***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
