Error: No module: ngRoute when trying to implement routing in angularjs

Question

app = angular.module("dithat", ["ngRoute", "ngResource", 'ng-rails-csrf']);
  app.config(['$routeProvider',
  function($routeProvider) {
  $routeProvider.
  when('/', {
    templateUrl: 'app/views/layouts/_user_page.html',
    controller: 'accomplishmentController'
  });
}]);

Am I missing something? Thanks!

Brucine

Answer 1

Have you included the angular-route.js file in your page? And are you using angular 1.2.0 - the module doesn't seem to exist prior to this.

See http://docs.angularjs.org/api/ngRoute

Ectoderm

hi! no i didn't know that was required. I just got the route.min.js from here code.angularjs.org/1.2.0rc1 and put it in my assets/javascripts file and put this <script src="/assets/angular-route.js"></script> in my application.html.erb but it gave me errors like TypeError: Cannot read property 'copy' of undefined angular-route.js:7 Error: Unknown provider: $sceProvider <- $sce <- $route <- ngViewDire – Brucine

You need to tell it that it's JS. So try: <script type="text/javascript" src="/assets/angular-route.js"></script> – Slaphappy

What version of main angular.js file do you have? – Ectoderm

im using this gem 'angularjs-rails' – Brucine

In that case, it looks like you should be including angular-route with something like //= require unstable/angular-route in your gemfile. However, if you are not using unstable angular then I would expect @BKM is correct and you probably don't need the module. – Ectoderm

Refer this page github.com/angular/bower-angular-route to install ngRoute. – Rms

Answer 2

Add angular-route into application.js like

in /app/assets/javascripts/application.js

//= require angular
//= require angular-resource
//= require angular-route

Boom

Answer 3

Remove ngRoute from our dependency injection as you are already injecting routeProvider in config

app = angular.module("dithat", ["ngResource", 'ng-rails-csrf']);
  app.config(['$routeProvider',
  function($routeProvider) {
  $routeProvider.
  when('/', {
  templateUrl: 'app/views/layouts/_user_page.html',
  controller: 'accomplishmentController'
});
}]);

Horal