Final Major Project — Angular Restructuring

So after trying to learn how Angular works I decided to take the plunge and I created a branch to begin restructuring my application to build in angular support and get it to use angular to become a signle page application. This process was initially fairly simple, it was important for me to find an appropriate tutorial to be able to learn what to do which took some time but I found a great article about how to create SPAs with angular here:

however what I found is that essentially unless you want a javascript script to be executed at the same time as it loads you need to execute that script in a controller, the config element tells angular which html document to load into the home as a template and then the controller tells it what information to pass in like a script, with the map element that I need to load in I separated out my HTML map elements into separate HTML files which get loaded in and moved the JS into the controller, however when this happens the Javascript loads quicker than the HTML file meaning that the script cannot find the map container it is supposed to fit into and crashes. I tried many method of trying to solve this, I added code forcing the JS not to be run until the page was loaded however for some reason this code made the map load more than once cause the map to give an already initialised error, something which I spent a long time trying to rectify with some rather messy code but nothing seemed to do the job. The other option I had was to add the map div where the javascript executes the code to the index seeing as the map happens on the index so it’d be ok for that code to be loaded in the first place and doesn’t really need to be separated onto separate files and then have the rest of additional content to be loaded with Angular. Once I made these relevant changes I discovered that it worked however it only worked on the original map image, not any additional things which need to be added to map like the pop up box and any styling on them, also any additional code like routing can no longer be used, additionally it break the angular switching to other pages. It seems the app could be changed fully into angular which would be great for really large apps, however having a loading splash page and ensuring that I don’t have too many pages on my application might be preferable, plus at that point no further page load would happen on presses so at least all of the information would be loaded. Also one of the big benefits of using angular is having a URL structure that the user can understand that even thought they’re on a single page application the URL changes when they’re in different parts of the app to reflect that however as my app is going to be a full screen application the user wouldn’t have access to the URL bar so they wouldn’t actually benefit from this. I’m considering giving up on angular as whilst possible it’d be a waste of time compared to what I could do with that time as long as I keep the application small in terms of page numbers but adapat the content using the database to make it as detailed as possible.

Show your support

Clapping shows how much you appreciated Harry Foster’s story.