title: Angular unknown provider and Cannot POST /signup
body: <p>Before you say anything, I know the solution probably is to inject the dependency but I checked other open source codes and compare it with mine, it is exactly the same. While theirs work while mine's not working</p>
  
  <p>Currently the problem is at route '/signup'</p>
  
  <p>I got <strong>Error: error:unpr
  Unknown Provider</strong> when I check the console at route '/signup' and</p>
  
  <p>Whenever I go to '/signup' route and press submit button it supposed to hit the api and redirect to '/' but what I got instead is Cannot POST /signup. </p>
  
  <p>The api works just fine when I used POSTMAN, I assume the problem is with angular. </p>
  
  <p>index.html ( Does the order of the script is important? )</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html ng-app="MyApp"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;base href='/'&gt; 
      &lt;!-- load bootstrap from CDN and custom CSS --&gt;
      &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
      &lt;!-- &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css"&gt; --&gt;
      &lt;link rel="stylesheet" href="assets/css/bootstrap.min.css"&gt;
  
      &lt;!-- JS --&gt;
      &lt;!-- load angular and angular-route via CDN --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"&gt;&lt;/script&gt;
  
      &lt;script src="app/app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app/controllers/userController.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app/services/factories.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('MyApp', ['ngRoute'])
  
      .config(function($routeProvider, $locationProvider) {
  
          $routeProvider
  
              .when('/', {
                  templateUrl: 'app/views/home.html',
                  controller: 'HomeController'
  
              })
  
              .when('/signup', {
                  templateUrl: 'app/views/signup.html',
                  controller: 'SignUpController'
              });
  
          $locationProvider.html5Mode(true);  
      }) 
  </code></pre>
  
  <p>userController.js</p>
  
  <pre><code> angular.module('MyApp')
  
      .controller('SignUpController', function($scope, User) {
  
  
          // sign up the user
          $scope.signup = function() {
  
              User.create({
                  name: $scope.name,
                  username: $scope.username,
                  password: $scope.password
              });
  
          }
  
  
      });
  </code></pre>
  
  <p>factories.js</p>
  
  <pre><code>angular.module('MyApp')
  
  .factory('User', function($http, $alert, $window, $location) {
  
  
      var userFactory = {};
  
      userFactory.create = function(userData) {
          return $http.post('/api/signup', userData)
              .then(function(data) {
                  $window.localStorage.setItem('token', response.data.token);
                  $location.path('/');
              });
      }
  
  
      return userFactory;
  
  });
  </code></pre>
  
  <p>signup.html</p>
  
  <pre><code>&lt;div class="span3 well"&gt;
        &lt;legend&gt;New to Project626? Sign up!&lt;/legend&gt;
      &lt;form method="post" ng-submit="signup()"&gt;
          &lt;input class="span3" name="name" placeholder="Full Name" type="text" ng-model="name"&gt; 
          &lt;input class="span3" name="username" placeholder="Username" type="text" ng-model="username"&gt;
          &lt;input class="span3" name="password" placeholder="Password" type="password" ng-model="password"&gt; 
          &lt;button class="btn btn-primary" type="submit"&gt;Sign up for Project626&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I like this way of writing angular because its way cleaner for me. For your information the open source that I mention above is <a href="https://github.com/sahat/tvshow-tracker/blob/master/public/controllers/signup.js" rel="nofollow">https://github.com/sahat/tvshow-tracker/blob/master/public/controllers/signup.js</a></p>