ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses...
Transcript of ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses...
![Page 1: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/1.jpg)
ArcGISAPIforJavaScript:BuildingappsforAngularANDYGUP ALLISONDAVIS
@agup @araedavis
![Page 2: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/2.jpg)
What'stheplantoday?LearnhowtouseArcGISAPIforJavaScriptwithAngularCLIArcGISAPIforJavaScriptmoduleswithesri-loaderAsyncpatternsAngularComponentDevKit(CDK)ServicesRoutingStatemanagementArcGISAPIforJavaScriptmoduleswithwebpack
![Page 3: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/3.jpg)
Angular6+
ArcGISAPIforJavaScript4.x
https://github.com/Esri/angular-cli-esri-map
![Page 4: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/4.jpg)
Gettingstarted1.Downloadourrepo
2.FollowalongasweworkwithAngularsampleapps
./sample_apps/app-scaffolding
./sample_apps/esri-loader
...andmore...
https://github.com/andygup/angular-plus-arcgis-javascript-ds2020
![Page 5: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/5.jpg)
Basicbuildingblocks
AngularCLI
"esri-loader"
esrimap.component.ts
AppScaffolding
![Page 6: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/6.jpg)
Reliablyload(orlazyload)ArcGISmodulesusingourAMDloader
ControlwhichArcGISmoduleswhen/whereyouwant,àlacarte
It'sEASYandverylightweight
esri-loader
Sampleapplication
![Page 7: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/7.jpg)
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);
![Page 8: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/8.jpg)
:"atypedsupersetofJavaScriptthatcompilestoplainJavaScript"
AngularusesTypeScriptasaprimarylanguageforappdevelopment
EsriprovidestypedenitionsfortheArcGISAPIforJavaScript:
AdditionalTypeScriptresources:
Typesforarcgis-js-apiTypeScript
npminstallsave@types/arcgisjsapi
Angular'sTScongguideEsri'sTypeScriptsetupguide
![Page 9: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/9.jpg)
AsynchronousOperationsThreewaystomanageoutofprocess,outofsequenceoperations:
PromisesCustomEvents
RxJSObservables
![Page 10: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/10.jpg)
Async:Promises
![Page 11: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/11.jpg)
Async:Events
![Page 12: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/12.jpg)
RxJSandObservables(ReactiveExtensionsforJavaScript)-alibraryforreactive
programming
AngularusesobservablesviaRxJStohandlemanycommonasyncoperations:
Underthehood,
RxJS
HTTPReactiveforms
Router
AngularcustomeventsextendstheRxJSSubject
![Page 13: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/13.jpg)
Async:Observablesthis.formSubscription=this.wonderForm.valueChanges.subscribe(value=>//dosomethingcoolwithourupdatedformvalue!)
//don'tforgettocleanupanysubscriptionsngOnDestroy()this.formSubscription.unsubscribe()
![Page 14: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/14.jpg)
AngularComponentDeveloperKit(CDK)
AuthoredbytheAngularteamImplementscommoninteractionpatternsandcomponentsUnopinionatedaboutpresentation
builtontopofCDKAngularMaterial
![Page 15: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/15.jpg)
AccessibilityandresponsivenessworkoutoftheboxDevelopershavefullcontrol-customstyles,sorting,paginationcanbeaddedontopTabletemplateanddatasourceexistindependentlyofeachother
AngularCDKdemo
![Page 16: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/16.jpg)
AngularStateManagementApplicationstateComponentstateSharedstateRouterstate
Ohsomanychoices...!
![Page 17: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/17.jpg)
NeedtomaintainstateaswechangeroutesCanuseaserviceandRxJStomaintainthestate
SimplemapstatewithRxJS
![Page 18: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/18.jpg)
Scalableapproachtomaintainingapplicationstate
NgRxDataStore
![Page 19: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/19.jpg)
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
![Page 20: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/20.jpg)
@arcgis/webpack-plugin
@angular-builders/custom-webpack
Customizebuildcongwithoutejectingwebpack//angular.jsoncustomconfiguration"build":"builder":"@angularbuilders/customwebpack:browser","options":"customWebpackConfig":"path":"./extrawebpack.config.js",...
![Page 21: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/21.jpg)
extra-webpack.cong.jsconstArcGISPlugin=require('@arcgis/webpackplugin');/***ConfigurationitemsdefinedherewillbeappendedtotheendoftheexistingwebpaCLI.*/module.exports=plugins:[newArcGISPlugin()],node:process:false,global:false,fs:"empty",devtool:'eval'
![Page 22: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/22.jpg)
InitializetheMapimportMapfrom"esri/Map";importMapViewfrom"esri/views/MapView";ngOnInit()this._map=newMap(basemap:this._basemap);this._view=newMapView(container:this.mapViewEl.nativeElement,map:this._map);
![Page 23: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/23.jpg)
WorkingwithsecureservicesDOMException:Failedtoexecute'importScripts'on'WorkerGlobalScope'
https://github.com/Esri/arcgis-webpack-plugin#usage
![Page 24: ArcGIS API for JavaScript: Building Apps with Angular · 2020-04-30 · JavaScript" Angular uses TypeScript as a primary language for app development Esri provides type denitions](https://reader030.fdocuments.us/reader030/viewer/2022013010/5f1f1a9c0bcf3b227d03ce5c/html5/thumbnails/24.jpg)
ResourcesPresentationGitHubrepoArcGISAPIforJavaScriptUsingtheArcGISAPIforJavaScriptwithAngular:Guideesri-loaderarcgis-webpack-pluginSampleArcGISJSAPI/AngularCLIapplicationGeoNet:ArcGISAPIforJavaScriptCommunityGISStackExchange