title: angularjs Uncaught Error: Unknown provider:
body: <p>I need some help out there.  I am learning Angularjs and trying to create a service.  Currently I am trying to separate everything in their modules.  When I create a new module called (bac.route-manager) and try to inject it in the app config as RouterService I get an error that I do not understand the meaning or how to fix it.  All my other stuff seems to work, except when I tried to add this module this unknown provider starts showing up only after I try to inject it.  Please any help is appreciated.</p>
  
  <p>My error  </p>
  
  <pre><code>Uncaught Error: Unknown provider: RouterService from bac
  </code></pre>
  
  <p>My app.js file</p>
  
  <pre><code>angular.module('bac', [
     'bac.route-manager'
  ])
  
  .config( function bacAppConfig( $routeProvider, RouterService ) {
  
       //I dont knwo if i can do this but right now it doesnt matter because of error
       console.log(RouterService.getRoutes());
  });
  </code></pre>
  
  <p>My route-manager.js file</p>
  
  <pre><code>angular.module('bac.route-manager', [])
  
  .service('RouterService', function() {
  
      this.getRoutes = function() {
          return {
                  "/login": {
              templateUrl: 'app/modules/login-manager/partials/login.tpl.html',
               requiredLogin: false
           },
  
          "/dashboard": {
              templateUrl: 'app/modules/dashboard-manager/partials/dashboard.tpl.html',
              controller: 'DashboardController',
              requiredLogin: true
           }
  
          };
  
  };
  </code></pre>
  
  <p>});</p>
  
  <p>I using grunt to generate the js includes in my html file but here is what that looks like with alot of stuff removed for brevity.</p>
  
  <p>My index.html </p>
  
  <pre><code>&lt;html lang="en" class="no-js" ng-app="bac"&gt;
      &lt;body&gt;
          &lt;ng-view&gt;&lt;/ng-view&gt;
  
       &lt;script type="text/javascript" src="vendor/angular/angular.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="app/app.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="app/modules/dashboard-manager/dashboard-manager.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="app/modules/route-manager/route-manager.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>