title: AngularJS Restful Routing
body: <p>I'm trying to structure my app using the Restful/Ruby convension <code>/&lt;resource&gt;/[method]/[id]</code>. How I've done it previously when using a server-side MVC framework like CodeIgniter was to dynamically route based on the URI:</p>
  
  <p>ex.</p>
  
  <pre><code>www.foo.com/bar/baz/1
  </code></pre>
  
  <p>The app would then use method <code>baz</code> in controller/class <code>bar</code> and return <code>views/bar/baz.php</code> (populated with data from <code>bar-&gt;baz</code>)</p>
  
  <p>I would like to do the same in Angular, but I'm not sure if it supports this (and if it does, I'm not sure exactly how to go about it). At the moment I'm using <code>$routeProvider</code>'s <code>when</code> method to specify each case. <a href="http://docs.angularjs.org/api/ng.$route#Example" rel="noreferrer">$location.path()</a> looks like it might have what I need, but I don't think I can use it in <code>app.js</code> (within <code>config()</code>).</p>
  
  <p>What I'd like to do is something like this:</p>
  
  <pre><code>.config([
    '$routeProvider', function($routeProvider) {
      $routeProvider
      .when(//&lt;resource&gt; controller exists
        resource+'/'+method, {
          "templateURL": "views/" + resource + "/" + method + ".html",
          "controller":  resource
        }
      ).otherwise({ "redirectTo":"/error" });
    }
  ]);
  </code></pre>
  
  <p>And the router automatically calls the appropriate method.</p>
  
  <p><strong>EDIT</strong> Also, why does <a href="http://docs.angularjs.org/api/ng.$routeProvider#Methods" rel="noreferrer">$routeProvider</a> freak out when I specify <code>when('/foo/bar', {…})</code> ?</p>
  
  <p><strong>EDIT 2</strong> Per Lee's suggestion, I'm looking into doing something like this:</p>
  
  <pre><code>$routeProvider
    .when(
      '/:resource/:method/:id', {
        "templateUrl": function(routeParams){
          var path = 'views/'+routeParams.resource+'/';
          return ( typeof routeParams.method === 'undefined' ) ?
            path+'index.html' : path+routeParams.method+'.html';
        },
        "controller": RESOURCE
    })
    .otherwise({redirectTo: '/error'});
  </code></pre>
  
  <p>I noticed the following in <a href="http://docs.angularjs.org/api/ng.$routeProvider#Methods" rel="noreferrer">$routeProvider</a>'s doc:</p>
  
  <p><img src="https://i.stack.imgur.com/ydALd.png" alt="screenshot from Dash. full text below"></p>
  
  <blockquote>
    <p><em>templateUrl</em> – {string=|function()=} – path or function that returns a
    path to an html template that should be used by ngView.</p>
    
    <p>If <em>templateUrl</em> is a function, it will be called with the following
    parameters:</p>
    
    <p>• {Array.&lt;Object&gt;} - route parameters extracted from the current
    <a href="http://docs.angularjs.org/api/ng.$route#Example" rel="noreferrer">$location.path()</a> by applying the current route</p>
  </blockquote>
  
  <p><strong>Edit</strong>: The option to set <code>templateUrl</code> to a function is part of the unstable <a href="http://code.angularjs.org/1.1.2/angular.js" rel="noreferrer">1.1.2</a> build: <a href="https://github.com/angular/angular.js/issues/1963" rel="noreferrer">#1963</a> (but it doesn't work as of 2013-02-07).</p>
  
  <p>There is a dicussion about adding this functionality on AngularJS's Github: <a href="https://github.com/angular/angular.js/pull/1193" rel="noreferrer">#1193</a> <a href="https://github.com/angular/angular.js/pull/1524" rel="noreferrer">#1524</a>, but I can't tell if it was actually implemented (in the docs from Dash quoted above, it looks like it has been, and the docs on the site haven't been updated yet).</p>
  
  <p><strong>EDIT 3</strong> To clarify what I want to happen (per lee's request), in simplest terms, I would like to go to <code>www.foo.com/index.html#/people</code></p>
  
  <p>Angular should use controller <code>people</code>, automatically call its <code>index</code> method, and should serve up</p>
  
  <blockquote>
    <p><strong>./views/people/index.html</strong><br />
    ./views/people/map.html</p>
  </blockquote>
  
  <p>Also, if I go to <code>www.foo.com/index.html#/people/map</code></p>
  
  <p>Angular should use the <code>people</code> controller again, but this time automcatically call its <code>map</code> method and serve up <em>…map.html</em> (because map was specified in the url)</p>
  
  <blockquote>
    <p>./views/people/index.html<br />
    <strong>./views/people/map.html</strong></p>
  </blockquote>
  
  <p>Then, if I go to</p>
  
  <blockquote>
    <p>www.foo.com/index.html#/widgets</p>
  </blockquote>
  
  <p>Angular should serve up</p>
  
  <blockquote>
    <p><strong>./views/widgets/index.html</strong><br />
    ./views/widgets/details.html</p>
  </blockquote>
  
  <p>The code for the router should be very generic—I shouldn't have to specify a <code>.when()</code> for every route.</p>