title: AngularJS: calling from one route to another, passing a parameter, $routeParams?
body: <p>I'm trying to have one controller in AngularJS call another controller (well, actually another route), and pass in a parameter.  I'm trying to work out whether I'm better to:</p>
  
  <ol>
  <li>Pass the parameter as a search string on the URL.  If so, then I can't work out how to do this, details below</li>
  <li>Pass the parameter using a service.  This feels a bit like creating a global variable, which seems to me to have issues.  Again, if this is the right way, then I can't quite work out how it works.</li>
  </ol>
  
  <p>To provide more detail, I'm building a sample app so I can learn how to bolt AngularJS onto an existing Rails app, using the restful API that Rails provide.  I'm writing a tutorial on that as I go so as to keep my thoughts straight, and potentially help others to do the same.  That tutorial is <a href="http://technpol.wordpress.com/2013/09/03/angularjs-and-rails-tutorial-index/" rel="nofollow">here</a>, the problem is currently on the 6th page of that tutorial.  The sample app is a sports league - it has clubs and teams.  A team lives within a club.  </p>
  
  <p>I want to be able to come to the teams list page directly, in which case I show all teams.  I also want to be able to come to the teams list view from a particular club, in which case I want to show just the teams within that club.  Outside of angular, this would imply to me that I come to /teams, which shows all teams, or I come to /teams?club_id=1, which shows teams for club_id=1.  I don't see this as a path thing - so I'd expect /teams/1 to be team 1, not teams for club 1, so I see it as a search parameter thing.</p>
  
  <p>For the code I've tried, I've tried to edit my teams controller so that it uses $routeParam to extract the value.  When I do this and run the debugger, $routeParams.club_id is null (in fact, $routeParams overall is empty):</p>
  
  <pre><code>.controller( 'TeamCtrl', function TeamController( $scope, titleService, TeamRes, TeamInput, $dialog, $routeParams ) {
    titleService.setTitle( 'Team' );
  
    $scope.club_id = $routeParams.club_id;
  </code></pre>
  
  <p>I can see commentary saying that I need an ng-view in my HTML template for this to work, whereas my definition of the route is currently in the controller as follows:</p>
  
  <pre><code>.config(function config( $stateProvider ) {
    $stateProvider.state( 'team', {
      url: '/team',
      views: {
        "main": {
          controller: 'TeamCtrl',
          templateUrl: 'team/team.tpl.html'
        }
      }
    });
  })
  </code></pre>
  
  <p>The html for this page is very simple, as it basically consists of a grid plus a couple of buttons:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h1&gt;Team functions&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="body"&gt;
    &lt;strong&gt;Filter:&lt;/strong&gt;&lt;input type="text" ng-model="filterOptions.filterText" /&gt;
    &lt;div class="gridStyle" ng-grid="gridOptions"&gt;&lt;/div&gt;
    &lt;button ng-click="newTeam()" class="btn btn-primary" &gt;New Team&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Another option I have seen suggested is using a service/factory.  It seems possible to define a service within my teams controller, then have my clubs controller pass data into that service before calling the teams route.  To me that feels a little like declaring a global variable - it feels fragile in that if that variable doesn't get reset through some code defect or other unexpected problem, then next time I come to the page it will still have that club_id set.  Passing it on the route seems more deterministic - there seems less chance that it will hang around in global state somewhere.  Of course, the fact that I can't work out how to get a service to actually do this could also be part of the problem.</p>
  
  <p>Before I go much further with working this out, I'm interested in whether one or the other of these options is the "better" way to handle the need.  I'm leaning towards the first (notwithstanding I haven't made it work yet), but the second seems to be more what people are recommending.</p>