title: How to make Angular JS use a hash URL to represent an action?
body: <p><b>TL;DR;</b></p>
  
  <p>I've written a program that uses DOM-manipulation and jQuery to respond to the user inputting a comma-separated list of values in a hash-URL and wish to do it in Angular, instead.</p>
  
  <p><b>The long version</b></p>
  
  <p>I have been writing a program, on and off, in my spare time, that draws fractal images, such as the famous Mandelbrot fractal.  Here's the URL: <a href="http://danielsadventure.info/html5fractal/docs/intro.html" rel="nofollow noreferrer">http://danielsadventure.info/html5fractal/docs/intro.html</a>.  I did this as an exercise to flex my HTML5 muscles with features like the canvas element and web workers.  The program works great.  Here is a rendered image of the "Negabrot" fractal from my program:</p>
  
  <p><img src="https://i.stack.imgur.com/JgTYA.png" alt="enter image description here"></p>
  
  <p>Recently, I've been teaching myself Angular, and I decided to rewrite the Javascript using Angular instead of jQuery.  Once again, I'm doing this as an exercise.</p>
  
  <p>Angular is, indeed, a very suitable tool because there are lots of forms that the user may use to describe the fractal image to be drawn.  I was able to use Angular to bind a model to the forms and get rid of the DOM-manipulation code that I was previously using.  Yay!  Angular is awesome!</p>
  
  <p>There is another feature of my program that it is not entirely clear how I should convert it to work with Angular.  My program is a Single Page Application.  There is only one thing it does: draw fractal images.  However, I use hash-URLs to keep track of what fractal is being drawn and what configuration is used to draw it.  For example, you can follow the URL below to see a zoomed-in section of the Multibrot-5 fractal:</p>
  
  <p><a href="http://danielsadventure.info/html5fractal/index.html#103,0.41000000000000014,1.0299999999999998,0.41999999999999993,1.04,2,1261,true,z%20" rel="nofollow noreferrer">http://danielsadventure.info/html5fractal/index.html#103,0.41000000000000014,1.0299999999999998,0.41999999999999993,1.04,2,1261,true,z%20</a>^%205%20%2B%20c,-2,2,-2,2</p>
  
  <p>As you can see, the URL consists of a list of comma-separated values that describe different aspects of the programs configuration.  If you draw something beautiful with it, you can simply send someone else the URL and they can draw the same thing; easy as pie!</p>
  
  <p>In order to accomplish this, I listen for an event that indicates that the hash-URL has changed and respond to it by updating the configuration on the form, once again using old-fashioned DOM-maniputation.</p>
  
  <p>I previously asked on StackOverflow how to respond to hash-URLs, and I was directed to ngRoute.  ngRoute looks very useful, but it looks like it is associated primarily with templates and controllers.</p>
  
  <p>In my program, I need not load any additional templates.  All I need is to respond to a new hash-URL by updating the configuration and drawing a new fractal.  I also want to update the hash-URL with the same when the user manually updates the configuration and draws a new fractal.</p>
  
  <p>In short, what I want to happen is this:</p>
  
  <p>When the user enters a new hash-URL, the program should respond by updating the model that is bound to the inputs so that the form values change.</p>
  
  <p>When the user manually changes the inputs and clicks a button to draw again, the hash-URL should be updated with the new configuration.</p>