Angular and the ArcGIS API for JavaScript

Andy Gup @agup

Sean Olson seanolson-io

Jacob Wasilkowski @JWasilGeo

## [Angular](https://angular.io) + [Esri JSAPI](https://js.arcgis.com) [](https://angular.io) [](https://angular.io) [](https://angular.io) [](https://angular.io) [](https://angular.io) [](https://angular.io)

## Angular? Yes. Angular.  --- _Not "AngularJS", "Angular v1", "Angular.js", etc._ https://github.com/Esri/angular-esri-map 

## Upcoming, related presentations 1. **[Using Frameworks with the ArcGIS API for JavaScript](https://devsummit2018.schedule.esri.com/schedule/1224212752)** - Thursday, March 08 at 2:30pm, Primrose A - Rene Rubalcava and Tom Wayson 2. **[Kick Starter: Rapid Application Development using Angular CLI](https://devsummit2018.schedule.esri.com/schedule/433914485)** - Friday, March 09 at 8:30am, Pasadena/Sierra/Ventura - Sean Olson

## What's the plan today? ### Assuming some familiarity with Angular 2+: - Walk through sample Angular apps from http://esriurl.com/13900 - Learn how to use Esri JSAPI _inside of_ Angular apps - Consume Esri JSAPI from CDN

## Getting started 1. Download our repo at http://esriurl.com/13900 - Github "sean-olson-e/Angular-and-the-ArcGIS-API-for-JavaScript" 2. Follow along as we work with Angular sample apps - ./sample_apps/1-app-scaffolding - ./sample_apps/2-more-app-scaffolding - ./sample_apps/3-the-esri-loader - ...and more...

## 1-app-scaffolding - Quick start instructions for this demo ```bash # only once on your computer npm install -g @angular/cli ``` ```bash # go to the first sample app cd ./sample_apps/1-app-scaffolding # install dependencies npm install # serve the app for development ng serve # or, if you want to build for production ng build --base-href ./ ```

## 1-app-scaffolding - Building blocks: - Angular CLI - "esri-loader" - custom demo files: - `esri-map.component.ts` - `esri-map.component.html` - `esri-map.component.css`

## 2-more-app-scaffolding - Extending the map component - Pass data from parent to child map component with input binding - Listen in parent for child map event

## 3-the-esri-loader - The glue that holds everything together is ["Esri/esri-loader"](https://github.com/Esri/esri-loader). > "A tiny library to help load ArcGIS API for JavaScript modules in non-Dojo applications" ```typescript /* ANGULAR GALAXY AND COLD VACUUM OF SPACE OUT HERE! */ import { loadModules } from 'esri-loader'; loadModules([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic' ]).then(([ EsriMap, EsriMapView, Graphic ]) => { /* ESRI PLANET WITH ATMOSPHERE INSIDE HERE! */ // for example you could recreate any demo from https://js.arcgis.com }); /* ANGULAR GALAXY AND COLD VACUUM OF SPACE OUT HERE! */ ```

## 3-the-esri-loader - This brings Esri **WITHIN** Angular - Which ultimately means Dojo **INSIDE OF** Angular - How? - `loadModulues` method that you `import` as needed ```typescript import { loadModules } from 'esri-loader'; ``` - `loadModulues` method dynamically injects an Esri `<script>` tag onto the page

## 3-the-esri-loader - Why? - Provides a reliable way to load Esri modules using Dojo's AMD loader - You benefit from getting to: - use Angular tooling - improve initial app load performance - control which Esri modules you want, à la carte

## 4-types-for-arcgis-api - [TypeScript](https://www.typescriptlang.org/index.html) is used throughout Angular's documentation - It is "a typed superset of JavaScript that compiles to plain JavaScript" - It allows for compile-time type checking for JavaScript ```typescript // without types let fullName = 'Bob Bobbington'; let age = 37; // with types let fullName: string = 'Bob Bobbington'; let age: number = 37; ``` - https://www.typescriptlang.org/docs/handbook/basic-types.html

## 4-types-for-arcgis-api - [Esri provides type definitions](https://github.com/Esri/jsapi-resources/) for the ArcGIS API for JavaScript - For Esri v4.x, install them with ```bash npm install --save @types/arcgis-js-api ``` and also add to `tsconfig.app.json`. ```json "types": ["arcgis-js-api"] ``` - Types are available through global "`__esri`" namespace for Esri v4.x - We recommend renaming to "`esri`" with ```typescript import esri = __esri; ```

## 4-types-for-arcgis-api - More info is available at https://github.com/Esri/jsapi-resources/ ```typescript // without const map = new EsriMap({ /* basemap, layers, etc. */ }); // with const mapProperties: esri.MapProperties = { basemap: 'streets' }; const map: esri.Map = new EsriMap(mapProperties); ``` ```typescript // without const arrayOfGraphics = []; const myGraphic = new Graphic({ /* geometry, symbol, etc. */ }); arrayOfGraphics.push(myGraphic) // with const arrayOfGraphics: esri.Graphic[] = []; const myGraphic: esri.Graphic = new Graphic({ /* geometry, symbol, etc. */ }); arrayOfGraphics.push(myGraphic); ```

## 4-types-for-arcgis-api Example of IntelliSense in VS Code  Thanks, type definitions!










## 9-arcgis-api-service - Refactor sample 2 to move map creation to a service - Create the map service - Inject the service into `app.component` - Replace the old `loadModules()` code with the new map service

## 10-ionic - Using the ArcGIS API for JavaScript with Ionic. - Ionic is built on Angular - Ionic life-cycle: async/await

## Where to get help: Esri JSAPI - https://js.arcgis.com - [GeoNet: ArcGIS API for JavaScript Community](https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript) - [GIS Stack Exchange](https://gis.stackexchange.com/)

## Where to get help: Angular - Angular docs at https://angular.io/ - Stack Overflow - Your own favorite places for web dev help

## Where to get help: esri-loader - The [README](https://github.com/Esri/esri-loader/blob/master/README.md) is phenomenal and up-to-date - New Github issue? - must include a live demo that shows the specific problem with esri-loader 

## Additional resources - http://esriurl.com/13900 - Github "sean-olson-e/Angular-and-the-ArcGIS-API-for-JavaScript" - https://github.com/Esri/angular-cli-esri-map - ["Esri/esri-loader"](https://github.com/Esri/esri-loader) is your new friend - [Related presentations this week](#/presentations-this-week) - Tom Wayson's blog: ["Loader of the Things: One Library to Load Them All"](http://tomwayson.com/2018/01/05/loader-of-the-things-one-library-to-load-them-all/) - And more Angular info at ["Esri/jsapi-resources"](https://github.com/Esri/jsapi-resources/tree/master/frameworks/angular)

Thank you

Andy Gup @agup

Sean Olson seanolson-io

Jacob Wasilkowski @JWasilGeo

<img src="img/esri-science-logo-white.png" style="margin: 0; background: none; border: 0px; box-shadow: none;" />