Getting started learning a new piece of tech can occasionally be frustrating.  In my case I ran in to what I suspect is common problem with open source software.  Namely: support and what do you do when there isn’t any?

To set the stage I’m learning AngularJS 1.  The reason I’m staying on 1 and not 2 might be a topic for another day.  I’m using Plural Sight to help me learn and a lot of the videos I’m watching are by John Papa.  He has a pretty cool framework called Angular HotTowel that is easy to add to a Visual Studio project.  Here is where our trouble starts.

The trouble starts when I tried to add the angular UI grid to my project.  It blows up because HotTowel is using an old release of AngularJS that was not compatible with Angular UI Grid.  Inside Visual Studio’s package manager all the libraries that HotTowel used had newer versions available.  But when you update to them HotTowel’s navigation breaks.

This is where software development problem solving takes over.  Running in the debugger I can trace through the code and see what is happening but it’s not clear why it is not working.  Reading the Angular library code is very time consuming and I just want to get on with things.  Surely somebody else has experienced this problem already so off to the search engines.

Googling the problem “HotTowel navigation broken” reveals nothings.  Lots of variations and different combinations made no difference.  the next step is to ask.  The obvious place to me was the HotTowel project on GitHub.  Thing brings up another piece of software development problem solving: clearly explaining what the problem is and then providing the steps to reproduce the problem.

Explaining and problem and showing people how to reproduce is can be difficult and time consuming.  However, I’ve usually found the effort worthwhile and in many cases, it leads to the answer before you even ask somebody else.  To get started I needed to isolate the problem to determine if it was an Angular problem or a HotTowel problem.  This lead to me reading a lot of material on how Angular does navigation.  It also put a spot light on the problem for me.

I started off with this article by Viral Patel “AngularJS Routing and Views Tutorial with Example”.  I used his sample code and had it up and working.  Viral is even so nice as to provide a plnkr.co environment to play around.  His example is nearly identical to what HotTowel is doing, even the early version of AngularJS.  If you change line 41 so that it refers to version 1.6.2 of AngularJS we reproduce our problem.   We’re making progress.

Something in Angular’s routing changed.  To try and understand what is happening I went off to Angular’s site (probably a better place to start in the first place, but it might not have revealed the problem so quickly).  In their tutorial (which is excellent by the way) there is a section on routing and views.  In the section on Configuring a Module we start to see what changed:

What is this hashPrefix nonsense?  Where did that come from, what does it do and is it causing my trouble?  Easy enough to find out.

Returning to the plnkr we just broke we can switch to the app.js file and change it to be like the one in the tutorial and see what happens.  We need to add ngRoute to our application and then add $locationProvider to the config function and finally setup the hashPrefix.  Easy:

Unfortunately, that doesn’t appear to have fixed the problem.  Reading in more details in the Angular tutorial we will notice a little green box with this nugget of wisdom:

Our html links for adding an order or showing an order do not have bangs in them (‘bang’ is short hand for the exclamation mark, ‘splat’ is for the asterisk ‘*”, I forget the other Unix cool guy slang.).  Return to the plnkr and see if just adding a bang to the path fixes our problem.

In plnkr return to the index.html file and add bangs after the hash marks:

Unfortunately, things still don’t work.  But after playing around a little more I removed the locationProvider from the config method and things started working.  So the config method ends up looking like this:

At this point things work.  With that in mind I return to my HotTowel application and make a few changes.  HotTowel already includes ngRoute, so all I have to do is change how SideBar.html creates the links:

Running the app and retesting shows that the simple addition of a bang (‘!’) to our links fixes the problem.  Talk about annoying.

For a person who has been working with Angular for a long time this might not seem like a big deal.  The reason I’m taking the time to walk through this process is to show how methodically breaking a problem down will help you solve it.  As you gain experience with a technology you’ll still encounter problems that in hind sight are trivial but at that moment bring you to a standstill.  The key is to isolate the problem in a reproduction.

Had my reproduction of the problem not led me straight to the solution I would have used the reproduction to ask the community at large what was going on.  Keep in mind that everybody is busy so the more succinct you make your question and reproduction the better your odds are for getting help.

I recommend asking for help as quickly as possible.  In case like posting to StackOverflow or the MSDN forums you might not get an answer for days, if at all.  So posting a question while you continue your own work is a good strategy.  In some cases, you’ll arrive at the answer before anybody else answers the question for you.  In others, somebody will point you in the right direction.  As a final not on asking for help: don’t forget to ask your own team.  Whether its work or your social circle: maybe somebody there already has the answer or can help you figure it out.