rails angular app error: Uncaught Error: [$injector:modulerr]

Question

When I go to localhost:3000/main/index, I see this, where I should see the blog posts in mainindexCtrl.js.coffee:

My blog
{{ post.title }}
{{ post.contents }}

and in the console I see this:

Uncaught TypeError: Cannot call method 'module' of undefined angular-route.min.js?body=1:8
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=venturelateral&p1=E…tp%3A%2F%2Flocalhost%3A3000%2Fassets%2Fangular.min.js%3Fbody%3D1%3A30%3A56) angular.min.js?body=1:7
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js?body=1:5375
Denying load of chrome-extension://cnnjfipllnlgjiehdbpddahelakgfibi/jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

After reading through the angular documentation, I saw that angular-route would fix this issue, so I included it, but it doesn't fix it :(

I have these files in my assets/javascripts folder:

angular-route.min.js
angular.min.js
underscore-min.js

application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require angular-route.min
//= require angular.min
//= require underscore-min
//= require_self
//= require_tree ./services/global
//= require_tree ./services/main
//= require_tree ./filters/global
//= require_tree ./filters/main
//= require_tree ./controllers/global
//= require_tree ./controllers/main
//= require_tree ./directives/global
//= require_tree ./directives/main

var app = angular.module('venturelateral', ['ngRoute']);

application.html.erb:

<!DOCTYPE html>
<html ng-app="venturelateral"> 
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Rails3 Bootstrap Devise Cancan" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Rails3 Bootstrap Devise Cancan" %>">
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= yield(:head) %>
  </head>
  <body class="<%= controller_name %> <%= action_name %>">
    <div class="navbar navbar-fixed-top">
      <nav class="navbar-inner">
        <div class="container">
          <%= render 'layouts/navigation' %>
        </div>
      </nav>
    </div>
    <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12" ng-view>
              <%= render 'layouts/messages' %>
              <%= yield %>
            </div>
          </div>
          <footer>
          </footer>
        </div>
      </div> <!--! end of .container -->
    </div> <!--! end of #main -->
  </body>
</html>

routes.rb

Rails3BootstrapDeviseCancan::Application.routes.draw do

  get "main/index"

end

mainindexCtrl.js.coffee

@IndexCtrl = ($scope) ->
    $scope.data = 
        posts: [{title: 'My first post', contents: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet lobortis vulputate. Ut tempus, orci eu tempor sagittis, mauris orci ultrices arcu, in volutpat elit elit semper turpis. Maecenas id lorem quis magna lacinia tincidunt. In libero magna, pharetra in hendrerit vitae, luctus ac sem. Nulla velit augue, vestibulum a egestas et, imperdiet a lacus. Nam mi est, vulputate eu sollicitudin sed, convallis vel turpis. Cras interdum egestas turpis, ut vestibulum est placerat a. Proin quam tellus, cursus et aliquet ut, adipiscing id lacus. Aenean iaculis nulla justo.'}, {title: 'A walk down memory lane', contents: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo sem, imperdiet in faucibus et, feugiat ultricies tellus. Vivamus pellentesque iaculis dolor, sed pellentesque est dignissim vitae. Donec euismod purus non metus condimentum porttitor suscipit nibh tempor. Etiam malesuada elit in lectus pharetra facilisis. Fusce at nisl augue. Donec at est felis. Sed a gravida diam. Nunc nunc mi, egestas non dignissim et, porta aliquam ante.'}]

app/views/main/index.html.erb

<div class="container" ng-controller="IndexCtrl">
  <h1 class="text-center">My blog</h1>
  <div class="row" ng-repeat="post in data.posts">
      <h2>{{ post.title }}</h2>
      <p>{{ post.contents }}</p>
  </div>
</div>

main_controller.rb:

class MainController < ApplicationController
  def index
  end
end

apneadiving · Accepted Answer · 2013-12-27 21:06:41Z

1

Order matters in js, so replace

//= require angular-route.min
//= require angular.min
//= require underscore-min

With:

//= require angular.min
//= require angular-route.min
//= require underscore-min

answered Dec 27, 2013 at 21:06

apneadiving

116k26 gold badges225 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pavan Katepalli Over a year ago

Thanks @apneadiving but now I don't see anything on the page. The errors in the console are gone now.

apneadiving Over a year ago

Cant see any obvious reason

Pavan Katepalli Over a year ago

does this look wrong in my application.js file? var app = angular.module('venturelateral', ['ngRoute']);

apneadiving Over a year ago

Its useless to store in a var, but its ok

Collectives™ on Stack Overflow

rails angular app error: Uncaught Error: [$injector:modulerr]

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related