title: AngularJS $injector: unknown provider
body: <p>I have  a problem I  have this piece of code:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="nl" ng-app="tradePlace"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;link href="./helpers/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
          &lt;link href="./helpers/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css"&gt;
          &lt;link href="./helpers/style.css" rel="stylesheet" type="text/css"&gt;
          &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="./includes/routes/routes.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="./includes/services/loginService.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="./includes/controllers/indexCntrl.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-view&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Routes.js:</p>
  
  <pre><code>var app = angular.module('tradePlace', ['ngRoute', 'tradeCntrls']);
  app.config(['$routeProvider', '$locationProvider', function($route, $location) {
      $route.
      when('/', {
          redirectTo: '/index'
      }).
      when('/index', {
          templateUrl: './includes/templates/index.html',
          controller: 'indexCntrl'
      }).
      when('/register', {
          templateUrl: './includes/templates/register.php',
          controller: 'indexCntrl'
      }).
      otherwise({
          redirectTo: '/index'
      });
  
      $location.html5Mode(true);
  }])
  </code></pre>
  
  <p>indexCtrnl.js:</p>
  
  <pre><code>var app = angular.module('tradeCntrls', []);
  
  app.controller('indexCntrl', ['$scope' , 'loginService', function($scope, login){
      $scope.login = function() {
  
      }
  }])
  </code></pre>
  
  <p>loginService.js</p>
  
  <pre><code>app.factory('loginService', ['', function(){
      return function login(){
  
      };
  }])
  </code></pre>
  
  <p>So, I get this error: </p>
  
  <blockquote>
    <p>Error: $injector:unpr Unknown Provider</p>
  </blockquote>
  
  <p>The error page on the AngularJS docs says:</p>
  
  <blockquote>
    <p>This error results from the $injector being unable to resolve a
    required dependency. To fix this, make sure the dependency is defined
    and spelled correctly</p>
  </blockquote>
  
  <p>Well, I`m sure is spelled correctly and it should be defined. I have already tried to put a getter in the loginServices.js to get the tradePlace module and also tried to use a getter with the tradePlaceCntrls module but I still get the error.</p>
  
  <p>I don`t know how to fix this.</p>