Angular and the ArcGIS API for JavaScript

now this is using angular in the ArcGIS API for JavaScript and I'm Andy I'm on the core team I'm one of the product managers and my co-presenter is Kevin hey everybody i'm kevin Bedell I work on the ArcGIS workflow manager team so how many of you guys are already using angular nice most everybody here that's a good sign all right trying to get my screen that change so what's our plan for the day we have a fun-packed 4550 minutes worth of content for you we are assuming some familiarity with angular 5 plus angular is currently on version 7 so show of hands how many people are using versions less than angular 5 you that's ok how many people are using angular 5 Jovan's few angular 6 even more angular 7 angular 8 that was a trick question so we're we're gonna walk through some angular sample apps we really wanted to boil this down to the fundamentals and focus on eight or nine key items that you're gonna use in everyday usage of building angular apps with the arcgis api for javascript we really tried to focus that down into just building blocks you guys can walk away from this session and get started immediately if you're already building angular applications hopefully we'll show you some new stuff that you hadn't thought about you guys close that door back there thank you appreciate it yeah it gets kind of noisy in the hallway appreciate it so we're gonna walk you through some of those fundamental building blocks help you get started and just a side note what we're focusing on now is in these samples for today is consuming the JavaScript API from the CDN we're not going to be looking at using local builds for those of you that are running angular 6 you know that the angular team broke ng eject so you can't eject web pack from angular anymore and they're trying to sort that out and figure out the new builders story but until the builders story gets sorted out by Google we're sticking with the patterns that we're showing you today it was really nice at angular 5 you could use our web pack plugin and inline all our modules and and not have to use a separate build process so what we're showing you today is just working directly from the CDN that's also the pattern that we use for the developers the arcgis.com website we use angular and we use ESRI loaders so we do eat our own dog food so this is we're not going to talk about angularjs or version one or however you want to call the older version of angular if you are using an older version of angular the repo at the very bottom angular ESRI map is the repo to go to for learning how to use the ArcGIS API for JavaScript in that repo the repo is pretty much been put in the maintenance mode we're focused mostly I'd actually the vast majority of our efforts are on the latest versions of angular so for example when angular 8 comes out then we'll update everything and focus on angular 8 you can follow along and our oh here's the the link to they get up and each of the samples are in the sample directory you if you already have Engler installed you should just be able to download the directory or clone it and just run these samples locally on your machine it should work just fine and we'll walk through each and each of the individual ones and explain what each of the the different repos do so that's it ready to get started alright so obviously you have to have angular COI installed we're focusing on the CLI specifically not just plain old angular in my opinion depending on what you're doing and and what type of requirements you have it's just an amazingly fast way to install components create services etc etc etc so everything that we're doing here and all the samples on the repo are focused on the CLI and in order to get these to run if you're interested now or after the session when you get get back home you're just going to CD into the individual directory you should just be able to run NPM install I think we checked most of the repos and then as soon as that's done you can just do ng serve and everything should just run pretty cool so let's talk about app scaffolding this is the most fundamental aspect of everything that you're going to do I know some of you maybe a lot of you already have existing angular applications the techniques that we're showing you can either work with what we call map first applications where the entire app is based on a map and these patterns also work on non map first applications maybe you have other stuff in there for the daily types of workflows that you're using and the map might be on a different tab or somewhere else within your your application these patterns work regardless of what type of application you're building and angular we're also going to talk a lot about a library called ESRI loader ESRI loader is the key to loading the ArcGIS API for JavaScript modules so we'll we'll dig into that well show you how I use it give you some tips and tricks on getting your modules to load and making sure everything's ironed out smoothly and all of your all of your components load in the custom and the folders we tried to label everything that we added as every - map something so you can tell where the mapping components are in the application mainly that's just for usability doesn't have anything to do with functionality so let's go take a look at the first application so this is the repo if you download it it looks just like this we have nine different samples we're going to be talking about the app scaffolding like I'm talking about now we'll go into some examples on ESRI loader then Kevin's going to talk to you about types promises events observables and maintaining map state and then I'll bring it home at the end with services and ionic so hopefully amongst these ten different topics we're going to hit on most of the major topics that you guys would run into when you're using angular with this API let's go ahead and dive into the app scaffolding so when you go ahead and open this repo we've pre-cum we've pre created these components for you the most basic component of course is just going to be a map component where everything's self-contained and we're importing that into the app module and the basic layout of these applications is we're going to install as we loader I'll talk more about that in just a second the most important thing is we want to wait for the on and knit event within this component if you don't do this then your mileage may vary there's a good chance that the the map probably won't even load and you'll most likely get some sort of an error then we're gonna go ahead and load the modules except we'll dive into that in a second and then we initialize our map so this is this right here inside ng on a net we're using ESRI loader this is the basic for every mapping application we use whether you're building it or we're using it you're gonna follow this type of a pattern pretty straightforward so far right so let's look at a little bit more app scaffolding that was a that was a pretty basic application and as we go through these different steps will start explaining how those different pieces work and get a little bit more complicated and advanced with each step so here what we want to do is we want to pass some data from the parent to the component in the very first one I showed you it was just self-contained I just created the map within the component I didn't do anything special let's go ahead and take a look at the second app this is very very similar to the first one I want to show you a couple of things the div where we're injecting the map is inside the component dot HTML and we're referencing this I'll show you where we referenced it in the typescript file and inside the app component now what we're doing is we we have defined our ESRI map component so we're importing this into the app component and we're passing some properties to it in this case we want to be able to control some things from from the parent this is this is the parent object and we're gonna be passing Center and base map and zoom and just add a little bit of spice for this just to give you some insight on how we handle a venting between the cam the parent component and the child the child is our map right that just to add some spice I added a map loaded event here it doesn't do anything but if you needed to do something after your map loaded you would listen for this event in the parent component and then do whatever you need to do so this is what it looks like in the parent and this is what we've extended from the previous example so now just like before let me zoom in see you guys in the back can see it so now just like before we're using ESRI loader we'll explain that more shortly I haven't forgotten we have set up an event emitter inside our child and this is this is the syntax for referencing the div where the map is going to be injected to we're using an element ref this is just standard angular for anybody in here that it's not familiar with angular in particular and what's different about this application is we we've set some input decorators on some getters and setters so that when the component is initialized we're pulling properties from the parent and so we went from a basic application that was just self-contained very simple it's just the map and everything was pretty much hard-coded here what we've done as we've extended this component so you can start to pass properties from the parent and it's starting to make it a little bit more dynamic it's not just hard-coded because the best practice is the the model and the parent should allow us give us some flexibility to control the view which is this that we're looking at right now which is our our map component and everything else should look pretty much just the same here except we add we add those properties in for like the center and the zoom and when the map is loaded we're going to go ahead and omit this map loaded event and that gets passed back to the parent was that a deep dive everybody still with us that was a lot right all right just checking fast and furious here close close some of these my oh there we go okay look I promised we were gonna talk about ESRI loader ESRI loader is it is a tiny script injection library that lets us inject the ArcGIS API for JavaScript modules and just about any third-party framework we use ESRI loader with react we use ESRI loader with view it's not just angular and there is an entire repo for this at get up calm / sv / ESRI loader and the way that you use it in angular is and you saw that in the code is we're just going to be importing the load modules method directly from this so you you npm install it now let's go ahead and look at the repo so this is a repo out on github.com / ESRI and there's just a ton of information here like I said we it works with a bunch of different frameworks there's a ton of different examples on how to load it from loading CSS Styles we're talking about loading modules I'm not really going to talk about styles lazy loading if you have older versions of the JavaScript API when you run when you run this after its installed it's going to use the latest ArcGIS API for JavaScript version which currently is 4 to 10 but if you go down in the readme and we don't we don't have time to go into all the different aspects of it you can set the Arceus api for javascript of version in the constructor and just a reminder you also have to set the CSS so if you change the arcgis api for javascript version you want to have a matching CSS for that so just something to keep in mind so you can actually set the CSS version and it goes on and on on there's just a ton of information here based on feedback that we've gotten from probably some of you over the last number of years that we've developed this library so there's two different ways to use s reloader you can use a promises base pattern which is up here on top you can use load modules you notice the required statement is missing here you all should be very familiar with the required statement right for for our AMD module loader system here you set the module names in an array in the load modules method and then in the promises base callback you set the aliases for the modules looks a little bit different than what you're used to but ezra loader will take care of loading those modules in the background for you the second pattern which is in most of our samples that you'll see is to have an async function and you'll set a constant on this array and again we're just defining the callback aliases here looks a little bit different than probably what you're used to and then we set in a weight on the load modules so just two different ways whatever suits your requirements best there's some flexibility built in there I just want to make sure that you understood this because sometimes you'll see it one way using promises base and sometimes you'll see it the other way using the async a wave pattern just depends on your requirements and what you're doing so why do we use as reloader I mentioned very early on that Google broke the web package act so we can't use the the ESRI web pack plug-in with angular 6 plus that's unfortunate until the Builder story gets gets flushed out and supposed to be fleshed out in angular 8 we'll see if it gets fleshed out we're sticking with ESRI loader it's tried-and-true it's small and we know it works so the benefits you get is you you continue to use the angular tooling to load your ESRI modules it may or may not I know it says improve initial app load performance it may or may not if you're lazy loading the API it will improve your initial load performance I'll say that again if you're lazy loading the API like if if you don't have the map loading first in your application and you defer the loading of the ArcGIS API for JavaScript then it's gonna improve your initial load performance if you load it with the regular component lifecycle what happens is the component will actually load first and then it'll call as reloader so there's a little just a little bit of a difference in there in terms of how this is working within the component lifecycle and last but not least you can control which modules you want just like if you're using a require statement just use the ones that you need and don't call in anything extra with that I'll turn it over to Kevin all right thanks Andy so you may have noticed as Andy was going through his demos and he made reference to it a few times that the files may have the syntax may have looked a bit different if you're not used to typescript or the dot es extension instead of dot J's that's because we are using typescript here through all our examples angular does the same they're using typescript in all their examples since there were a lot of show of hands on people that we're using angular I'm guessing most of you are already familiar with that but for anyone that's not we'll just cover it briefly here so typescript is a typed superset of JavaScript that compiles the plain JavaScript so this means that when you go to run your application the browser is just running plain JavaScript but it does give you that compile time type checking for JavaScript so it lets you ensure that you're not accidentally assigning a string to something that should be holding an integer or you're not putting objects of a certain type mixed together with strings in an array takes care of that at compile time then ESRI provides type definitions for everything in the ArcGIS API for JavaScript it's very simple to install them you can use npm install at type slash arcgis jsapi we have seen cases where the default behavior doesn't work and you need to explicitly define the type in the types array and the TS config file the default behavior should pick up all the types installed into the @ types folder under the node modules but like I said we have seen some cases where that default behavior doesn't work so if you run into issues where your types aren't being recognized even though you've installed them give it a try explicitly adding them to the array once you have your types installed and available to you you can use the underscore underscore ESRI namespace to access those types if you don't want those double underscores all over the place in your code you can add import ESRI equals underscore underscore ESRI statement to each file to basically alias the namespace once you have those types installed and available you can begin to do things like instead of just instantiating um ESRI map passing it an object with a bunch of properties you can instead create an object of type ESRI dot map properties and now pass that to your ESRI map constructor this way you know that you're setting the right properties in the map properties object you know that map properties is what you're actually supposed to be passing to ESRI map so on again ensuring that you have consistent arrays is available here with the ESRI types as well so if I have an array of graphics I can ensure that I'm pushing actual graphics into that the graphic type of object not accidentally inserting the plain geometry for example the other nice thing with typescript is it gives you the autocomplete help so here we have a screenshot showing intellisense and Visual Studio code if I switch over to my to my ID Heat IDE here which is IntelliJ I can I'm creating my map properties and I have my base map set and I also want some initial layers and I can't remember the name of the property I can hit the shortcut key here for my autocompletes and oh yeah it's just called layers and it takes an array of layer properties so I can begin to define that here so I'm gonna change gears a little bit at this point and we're gonna talk about some different patterns that come up again and again when you're working with angular and the ArcGIS jeaious API together some of these you may already be familiar with some of them may be new so the first one we're gonna talk about is deal with asynchronous operations and we'll talk about three different ways that we can deal with asynchronous operations so promises custom events in angular and rxjs observables there's a lot of overlap between these different patterns which one you can use but we kind of have some best practices that we can keep in mind choosing promises I'm sure you're all fairly familiar with that that's not an angular specific thing but it works great in the simple cases where you maybe have a request response type of pattern the nice thing with promises is you can use awaits and async with it to write code that looks more synchronous even though it is asynchronous the custom events are an angular specific thing we already saw a brief use of that in the event emitter that Andy had and I think the second demo where it had that map loaded event it was emitting I will see kind of a more fully fleshed-out version of that in a few minutes then rxjs observables are really powerful on they're not technically specific to angular they are a separate third-party library but angular uses them behind the scenes if you're working with angular today you're probably already quite familiar with them so we'll look at how we can tie that in with a map here as well so in these three going through these three patterns for asynchronous operations we're gonna look at basically the same map UI just with three different sets of type script behind the scenes so this is the application here we have in the first couple we have two components here we have the dashboard component which has the drop down and then the map is a child of that dashboard component and the behavior here is we select a wonder from the of the world from the drop-down on the left the map is going to zoom and pan to it and you'll also see some status information displaying on the left here panning and then when it's complete the message changes to done and then after a second that message disappears so let's look at how this is implemented using promises first of all so we'll start off looking at the HTML here so this is that dashboard component that's the parent component we are we have our drop down we're filling it in with some information we're pulling from the typescript file for this component and then we're wiring it up with an event and then here's our child component it's not too much going on here if we move on to that type script file so we'll actually kind of start at the middle section here so here is our selected Wonder event handler when we select something in the drop-down so it is asynchronous we're returning a promise so the first thing we do is disable the panel which is setting that panning to status message as well and just disabling the drop-down and then we call hand map method in our child component pass it the coordinates of the location we want to pan to and we're awaiting that and once the promise resolves we will enable the panel which we're renaming the drop-down displaying that done message and then just setting up a timeout to clear the done message after a second so then looking at our map component the typescript for that so we have our map view and if we go down to the bottom here we're doing the same thing that Andy showed in the NGO on in it we're taking load modules giving the list of modules we want to load and creating our map very similar to what Andy showed already in our pan map method here then that we're calling from the parent we are returning a promise calling go to on the map view and once we've completed going to the location we will we're actually gonna delay it a bit just for demo purposes so that we could see things happening a little easier but after 2 seconds we'll resolve the timeout which will then move on to that line that was after our await in the parent so very simple to kind of hang handle that asynchronous operation that's happening within our map so the next version then is going on to use an event emitter instead of a promise the two components are going to be exactly the same parent component child components of the map call pan map in the child again we're gonna see that we'll call go to and this time instead of resolving a promise we're going to call emit on the event that we have set up and we will ahead of time already be listening to that in the parent so that is something to keep in mind when you are working with the event emitters you want to make sure that you are basically subscribing or listening to that event before it fires we have seen cases where based on the life cycle of the components the one that's supposed to be listening isn't getting created and therefore not listening until after the event has already been emitted and those events aren't cute or anything like that so if nothing's listening it just says hey I'm here and that goes into the empty room and no one pays attention so we want to make sure that we have that listener kind of there already so let's so that tab let's look at the code for this so here start again in the HTML component the drop down is exactly the same bounce of the same method the part that's a little bit different here is this line so here we are setting our child creating our child component and we're also binding this wonder mapped event in the child to the enable panel method in the parent if we look at the type script for the parent it's going to be very similar to what we saw in the last one the difference is now selected wonder that handler for the event on the drop-down is no longer doesn't have the async keyword anymore because we're not awaiting anything instead we're just calling you pan map and then we're done with that and it's that binding of the event to enable panel that's going to display our done message we go to our map component now so we are creating our event emitter we're putting the output decorator on it so that we can access it in the parent and our pan map fan Jeon in it is exactly the same as before so I'll skip over that but the pan map is pretty much the same the difference being now once our timeout elapses we're calling emit on that event emitter that event rather than resolving the promise then the third different way that I'll show you here is using the rxjs observables here we have changed the structure of the components a little bit now the dashboard is just a parent that holds two child components so we have a child that contains our drop-down and then a second child that's a sibling of the drop-down component that is our map component and we don't want to have any references back and forth between these two components so we have instead is an angular service that we're going to reference in each of these and we're gonna pass our messages through that service so when we select something in the drop-down we're gonna call a method in our service called request pan that's going to call next on an Rx jes observable and then in our child or other component or map component do the same go to on the map view and when that's complete we'll call a second method in the service pan complete which is calling next on a second rxjs observable which we are subscribed to back in the first component where we can display our done message so let's see that in action oops one taps would fire so here this is that left-hand component the component with the drop down there's nothing interesting in the HTML for this one that's exactly the same as the promise based version so I won't show that but in this component will start in the ng on in its section here so here we are subscribing to the observable in our service and passing the anout enable panel method or calling the enable panel method in our callback the disable and enable are exactly the same as before selected wonder very similar but instead of calling a pan method on the map component directly we're calling a pan method that's on our Maps service and the other thing we can see here is that we have our our map service brought in here we go up now we can look at the map so again we have the same load module stuff here to actually create the map and we have that additional logic as well to subscribe to the second rsjs observable so when the pan requests observable publishes a message we are subscribed to that we're going to call our pan map and this time instead of passing the coordinates directly we're actually storing the coordinates in the service so that we could access them in different ways so we're gonna pull that out and pass it to our pan map method which looks very similar once again called go to Soto zoom level and then we're calling pan to wonder complete in the service so let's look at the service so here we're bringing in two subjects which is a subclass of observable a specific type of observable and we're creating our two new subjects one for each direction of communication basically and so we call pan to wonder we're gonna store the coordinates that were passed here call next on the first observable which in the map component will do our pan and then it'll call that pan to under complete calls the observable letting the first component know that we can display the done message the nice thing about the rxjs observables is the the promises are kind of that one shot request get a response kind of thing the observables have functionality for kind of pre-processing on the data before you handle it it's also a stream of data so you can respond again and again to it any questions on that section before we move on nope all right so next I'm going to talk about how we need to store maps state as we move between different routes in an angular application so if you're not familiar routes allow us to binds or to map browser URLs to different views into our application with different sets of components available and as we move between routes and angular it's going to destroy all the components in the old view and create the new components in the new view so this means that if you have a map that is on multiple routes or just you want to save the state as you move to a different route and come back you're gonna need to store the state yourself explicitly so here in this example we have a slightly different application here so we have two routes as I navigate between them you'll see just maybe a little bit bigger yet so you'll see the URL is changing as I navigate between the two routes the first route has a map as indicated by the map tab fairly obviously the other one just had that filler text and the other thing is as I click on my map it's just gonna draw some points on the map I'm gonna also pan over to the side here to change our extent as I go to the other route and come back it's destroyed that map component and it's going to recreate it so in this application I'm explicitly storing the state about what points were drawn on the map but I didn't store the state of the extent so we've gone back to the default extent so let's look at the code for this one so we'll start off just with this navigation component here we're using the rotor link directive in angular to set up our routes so we have the map 1 and the dashboard route then we'll look at the map component so here in our ng on init pulling in the modules we need creating our map and then skip over this section for just a second we're registering the click handler for when we click on the map creating a graphic from the point that we clicked on with a set symbology and then we're not directly adding the point to the map instead we're adding the map to a service a map state service that we've set up here and then we're gonna actually pull it back out of the map state service just to make sure that that service is the one source of truth for the points to be drawn on the map and we'll add it the map is a graphic then the part I skipped over is what happens when we come back and points already exist on the map so when the map view has been created we're gonna go to our map state service check whether we have any points already and if so we're just gonna add them all as an array with the add MIDI method so here you can see here's our map state service being injected so finally let's look at that service very simple we have a private array of graphics the add point method to push the points in and together to pull them out so with that we can preserve that state as we navigate so if we wanted to preserve the extent we can just add some logic to our map state service and do that within our our map as well yeah so the question was could you use the same sort of logic for adding additional layers to the map yeah for sure you definitely do that all right with that I'll turn it back over to Andy guys with us so far there's a lot of stuff fast wasn't it oh I just have a couple more sections and what I'm going to talk about now is just taking a slight step back and reiterating some points about services us about a services are such a critical component to modularizing your application and taking advantage of the angular capabilities so I am going to show an example of that of taking what I showed you in sample 2 and if you recall sample 2 you squeeze this fine operation here they grab a hold of that sample 2 was pretty much just a self-contained component when we started out and then I added some getters and setters so that you could have some communication from the parent to the component but this isn't very modularized visit all's I did was I took a basic hello world mapping application I added some getting properties and setting properties but to really be true to modularizing your application what you want to do is to be able to move all of this load modules code out into a service so we want we want to clean all this stuff up and move it out of this child map component and put it into a service so what I did is I created a map service I created a map service and this is what I've done is I'm ex I'm just exporting a class called ESRI map service I've pretty much I've added a embellish just a little bit here I call it a load map method in this service and inside of it I'm wrapping load modules in a promise and I'm gonna do everything else that we've already talked about I go ahead and and specify which modules I want and this is just a simple application you could clearly scale this up to meet your requirements here I just need the map module and the map view module I'm gonna do everything that I did before whoops I'm noticed that I'm using the the promises based callback on this I'm not using the async/await there's no particular reason why I did this other than to demonstrate that they both work and I'll go ahead and build this project here in just a second actually show you that it really is working and then in the callback I go ahead and create my map before I showed you that there's that div in the component HTML element I set all my properties and I resolve the promise when the map is initialized so what I've done here as I took this code out of my old component that I've highlighted here just basic everyday code and I moved it out of there into a service so now what I can do is I can share it amongst different components I don't have to duplicate my code and I've been true to two modularizing my development process and we don't really talk about it in this session but it makes it so much easier to test and you're all writing unit tests right of course right it makes it so much easier to test because now I've broken out this service code into its own place and I can run unit tests against it and test that specific aspect of functionality by itself and it's so much more powerful to do that and be able to share this code with other components so I moved all of my service I'm sorry I moved all of my map creation code into this service and now what I can do is all of this code and my old application so I'll just start back up back up at the top just to kind of go back over some of the concepts we've talked about is I I'm still I imported my as reloader in the ng on an it event I'm going ahead and I'm loading my modules I'm injecting my map into this div right and then when the map is done initializing I go ahead and send an event I'm going to get rid of all that code and reuse the service in this particular component and when you do that all of that stuff that you just saw in the ng event ends up looking just like this that's so much nicer so much cleaner you can unit test it you can share this this service with other components cool very powerful concept and now to show you that actually works I'm going to trust the conference internet that this actually works I'm gonna try and do a live build are you guys sending positive vibes to me I'm gonna go ahead and start this I at least had to build one project for this entire presentation mine or running in the background years were running in the background I'm actually gonna do a live build and test my luck here so there we go this is what the the test application looks like that uh and I'm gonna go ahead and open the developer console we had that map and that very simple map emitter that just said that the the map was loaded and we're just writing that information to the console here but you could actually do something with that in your application it weren't all right if you're not familiar with services this is just the angular documentation there's a great tutorial on it the nice thing about the angular CLI I mentioned at the very beginning is it is so fast to build these different aspects of your angular applications you can build the scaffolding for a service with just one command like it it shows here and there's I'm just giving a shout out to the angular documentation there's just some great examples of how you can extend this to meet your own requirements and so the the last technical item that we're gonna talk about is ionic how many people are in here are familiar with what ionic is a few for those of you that aren't ionic is a way to use your fantastic awesome JavaScript ninja skills to build a native application in iOS or Android so you can take almost any existing application and ionic uses just about any framework now you can use ionic with angular which is the default way that ionic used to be you can also use ionic with react I'm pretty sure that's in beta right now for anybody in here I know it's an angular session but you can also use it with react underneath the hood what this is using is an open source project called Cordova to convert your JavaScript code into a native application that's pretty cool right I'll show you a real live working example that with one minor detail that's not quite working right in debugging mode so you can use the ArcGIS API for JavaScript with ionic and I've created a handy repo for you that shows there's just a few simple patterns to know beyond everything that we talked about today everything that I talked about everything that Kevin discussed with observables and promises and callbacks and async that's all gonna work the same because it's an angular application under the hood and there's just a couple of things that you need to know about running in ionic and if you haven't used ionic before I recommend that you just go play with that try it out run it on your phone and go through the process of learning how to build a native app with your awesome JavaScript skills just a couple of things I want to point out other than my ability to get the the markdown correct here it walks you through all the different steps on how to do this yo I probably won't take you more than a half an hour to an hour I'm just guessing man how much software you have to install on your application to build your first native application and this walks you through all the different steps I'm not gonna go through them but I did want to show you was inside the application I used a tab a tabbed template and I was just gonna show you a couple of things that could save you hours of frustration and a lot of this is gonna look almost exactly like everything that we've covered so far you still have to install ESRI loader and you're going to import your your load modules we're still using an on an it event this is still angular underneath the hood but there's a one little trick here is that you have to await for the ionic platform to be ready and we mentioned this on a couple of different places you have the ng on in it and angular in this case you have to wait for ionic to initialize life cycle is so important other than problems with event emitters and losing events in your life cycle is getting that life cycle loading pattern just right will save you so many headaches I'm trying to figure out what's going on and then everything else here is is what we've talked about here is the async await pattern for using load modules and with that and with the skills and all the knowledge we've been part of with you you could leave this session today and build a native application during lunch and impress all your colleagues cool right so let's actually look at this I have here's the little bug that I ran to I updated my code this morning what I did is I have the application is running on my phone you can see there's the the map is actually there but for some reason is not showing up in the debugger you can whether you're using ionic applications or angular CLI you can debug these applications on your device you just need a little handy USB cord and to be on the same Wi-Fi network and you can see all of the requests you can see as I unfortunately pretend they're imagine if you will there's actually a map here in this panel I don't know what's up with that but you can see as I'm panning the map zooming it in we're getting a HTTP request here and I just wanted to show you guys that you know here's that event emitter did I set up in our other samples to say that the maps loaded you can do all of your debugging here you can inspect the the source of your application it's all available right here within the bundles pretty cool right so how did I do this for those of you that have never debugged a native device before I do have the I do have Android studio install so there's a couple extra steps that we just don't have time to talk about because we're almost done here but I go into remote devices and my device is hooked up by a USB port and then I inspected this application and then when you do that you get this cool nifty debugging screen cool right everybody should try it so with that let's go back to the slides there's a ton of resources in the slide deck the slide deck is available to you now it through this public github repo try it out check out some of these repos use ESRI angular or sorry ESRI loader if you have questions feel free to open issues on the github repos we try to get back within 24 hours on business days we're usually pretty responsive unless we're in the middle of a release cycle for general JavaScript questions if you have questions that aren't related to angular or as reloader then you can go out the Geo net I'm guessing most of you are familiar with geo net to ask your general JavaScript questions for the arc J's API for JavaScript and thanks for attending we have a few minutes for questions please do fill out the surveys as well they're super beneficial first yes [Music] you can you can handle some of that depends I architecting your app you can handle some of that in the state management and I can get tricky depending on how complex your application gets if you're mixing and matching views with different maps and and those type things but it's definitely possible to keep it all straight and just the most simplest way would be state management right because like Kevin was saying is you when you go to that different route it completely destroys the visual instance that previously existed so that's the trick is maintaining that that state it's gone and we recreate it from scratch when you go to the next route so somehow you got to maintain those properties objects classes methods etc any other questions [Music] [Applause] so the question was has a requirement to break out the map module to reuse it in different apps and angular does have a way to export components as web components we've have some experience with web components in theory web components this is an HTML standard and it lets you transport different things like the map component to different applications and even different frameworks and it's I have very little knowledge on that other than I've done it a few times and worked with a few customers and I I know that their improvement angular in particular is improving the ability to eject the component but to me it looked very bloated and there were some performance issues when I was working on it if someone else as more recent experience feels free to dive right in and help them out but web component would be a way to approach that you bet can you repeat the question did you so once you've loaded the map as an angular component you want to query the map yeah I'll look all the capabilities are there and as long as you have a reference to the map or the map view or the layers associated with the view you can query them like you would in any other JavaScript a ArcGIS API for JavaScript application yeah you just need to have the right modules in your load modules and make sure you have a reference to n it should just work last question you bet well thanks everybody I guess we'll be here afterwards [Applause]

Channel: Esri Events

Views: 5,245

Rating: 4.6734695 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System

Id: U8wC0O6-GZk

Length: 60min 27sec (3627 seconds)

Published: Tue Apr 09 2019