Angular is a hugely popular web application framework based on TypeScript. This session will take you through how to get started working with Angular and ArcGIS to create highly capable and interactive apps.

1. Angular and the ArcGIS API
for JavaScript
Seth Batterby, Esri UK

2. What am I going to cover?
• Angular
- What is it?
- Why we use it?
• Angular and the ArcGIS API for JavaScript
- Using the Esri loader
- Using Exclude and Require
- Esri webpack plugin
Esri UK Annual Conference 2018 | London

3. Angular – What is it?
• An open source web development framework
• Its more than just a framework!
- Develop across platforms
- End to end tooling
- Templating
- Routing
- Components
Esri UK Annual Conference 2018 | London

4. Angular – Why do we use it?
• Well suited for large and complex applications
• Makes it easy to implement complex requirements
• Write code in TypeScript, cutting down on bugs and errors
• Lots of tools to speed up development
Esri UK Annual Conference 2018 | London

5. Sweet AppBuilder
Esri UK Annual Conference 2018 | London
• Complex Angular application
• We use a lot of the Angular Framework
- Animations, Components, Reactive
Forms, Routing, Guards, Resolvers
• Use webpack for builds
• ArcGIS API for JS is used throughout

6. Angular and the ArcGIS API for JavaScript
- The ArcGIS API for JavaScript is written in Dojo
- It’s a large library of AMD modules
- Most module loaders implement AMD differently than Dojo
We need some workarounds to get Angular and the JS API working
together.
Esri UK Annual Conference 2018 | London

7. esri-loader
- A tiny library to help load modules
- Written and maintained by Esri
- Lets you control when the API is
loaded
- Can use with 3.x or 4.x versions of
the API
Esri UK Annual Conference 2018 | London

8. esri-loader
• Pros
- Allows for lazy loading modules, when you need them
- Zero configuration
- Can be used with other frameworks
• Cons
- Have to use complicated async patterns and callbacks
- Cant use import statements
Esri UK Annual Conference 2018 | London

9. Exclude and Require
Provides a slightly higher level of abstraction
There's a lot more configuration to handle
1. Configure webpack to exclude Dojo modules
2. Output bundles as AMD
3. Load ArcGIS API for JavaScript via a script tag
4. Use Dojo loader to require the bundles
Esri UK Annual Conference 2018 | London

10. Exclude and Require
• Pros
- Can use Imports for loading modules
- No need to use Promises or callbacks
• Cons
- Can slow down application startup
- Needs some configuration to get working
Esri UK Annual Conference 2018 | London

11. Esri webpack Plugin (New)
• Pros
- Same as the Exclude and Require pattern but in a handy plugin!
- Much less configuration needed
- Should be future proof
• Cons
- Only works with ArcGIS API >= v4.7
- Only works with webpack
Esri UK Annual Conference 2018 | London

12. Summary
- Angular
- Great for building complex applications
- There's a steep learning curve
- Wouldn’t recommend it for small applications
- ArcGIS API for JS
- 3 different patterns for loading
- esri-loader most popular
- New webpack plugin is the future!
Esri UK Annual Conference 2018 | London

13. Additional Resources
• Tom Wayson: How to load ArcGIS API for JavaScript modules
• Esri loader
- Esri loader repository
• Exclude and Require
- Tom Wayson: Using webpack
- Angular 2 with Esri API and webpack
• Webpack plugin
- Using the new webpack plugin for the ArcGIS API for JavaScript
- Webpack-plugin repository
Esri UK Annual Conference 2018 | London