title: Using $stateProvider and ui.router in AngularJS
body: <p>Working through this <a href="http://angularjs.meteor.com/tutorial/step_05" rel="nofollow">tutorial</a> on AngularJS with MeteorJS, but have run into some issues with ui.router, $stateProvider, and $locationProvider. </p>
  
  <p>My issues is that, as far as I can tell, everything should be wired up properly for routing, but my links don't actually work. Contents of my main files are below, but first more information about the problem:</p>
  
  <p>The problem seems to be with the line //$locationProvider.html5mode(true); in app.js. Its currently commented out, which allows the page to load, but doesn't route the links properly. If I uncomment it, then the page returns the following error:</p>
  
  <pre><code>Uncaught Error: [$injector:modulerr] Failed to instantiate module socially due to:
  TypeError: undefined is not a function
  </code></pre>
  
  <p>I assume in reference to $locationProvider being undefined. This looks a lot like a dependency injection error, but I can't find any dependency injection errors. Any help much appreciated. </p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>if (Meteor.isClient){
      angular.module("socially", ['angular-meteor', 'ui.router']);
  
      angular.module("socially").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
  
          $stateProvider
              .state('parties', {
                  url: '/parties',
                  templateUrl: 'parties-list.ng.html',
                  controller: 'PartiesListCtrl'
              })
              .state('partyDetails', {
                  url: '/parties/:partyId',
                  templateUrl: 'party-details.ng.html',
                  controller: 'PartyDetailsCtrl'
              });
  
          $urlRouterProvider.otherwise('/parties');
  
          //$locationProvider.html5mode(true);
      }]);
  
      angular.module("socially").controller("PartiesListCtrl", ['$scope', '$meteor', function($scope, $meteor){
          $scope.parties = $meteor.collection(Parties);
          $scope.remove = function(party){
              $scope.parties.remove(party);
          };
          $scope.removeAll = function(){
              $scope.parties.remove();
          };
      }]);
  
      angular.module("socially").controller('PartyDetailsCtrl', ['$scope', '$stateParams', function($scope, $stateParams){
  
          $scope.partyId = $stateParams.partyId;
  
      }]);
  
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;base href="/"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="socially"&gt;
          &lt;h1&gt;
              &lt;a href="/parties"&gt;Home&lt;/a&gt;
          &lt;/h1&gt;
          &lt;div ui-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>parties-list.ng.html</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input ng-model="newParty.name"&gt;
          &lt;label&gt;Description&lt;/label&gt;
      &lt;input ng-model="newParty.desc"&gt;
      &lt;button ng-click="parties.push(newParty)"&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;ul&gt;
      &lt;li ng-repeat="party in parties"&gt;
          &lt;a href="/parties/{{party._id}}"&gt;{{party.name}}&lt;/a&gt;
          &lt;p&gt;{{party.desc}}&lt;/p&gt;
          &lt;p&gt;{{party.name}}&lt;/p&gt;
          &lt;button ng-click="remove(party)"&gt;X&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>party-details.ng.html</strong></p>
  
  <pre><code>Here you will see the details of party number: {{ partyId }}
  </code></pre>