CODEWITHSUNDEEP
ruby-on-railsangularjs
bitfrost41
bitfrost41

Reputation: 129

AngularJS Error: [$injector:nomod] when trying to load 'templates'

So I'm following a tutorial right here: https://thinkster.io/angular-rails/

I'm at the part of "Wiring Everything Up". I'm still new at this and I keep getting this error:

Error: [$injector:nomod] Module 'templates' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.3.15/$injector/nomod?p0=templates

Error: [$injector:modulerr] Failed to instantiate module flapperNews due to:
[$injector:modulerr] Failed to instantiate module templates due to:
[$injector:nomod] Module 'templates' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=templates
minErr/<@http://localhost:3000/assets/angular/angular-4d9f3d92a489ec19b3256abf7e10c0fd.js?body=1:64:12
module/<@http://localhost:3000/assets/angular/angular-4d9f3d92a489ec19b3256abf7e10c0fd.js?body=1:1775:1
ensure@http://localhost:3000/assets/angular/angular-4d9f3d92a489ec19b3256abf7e10c0fd.js?body=1:1699:38

I'm pretty sure I've put it in application.js right after "angular". I'm adding up my controllers here, too. The structure is the same in the tutorial in my link. Thanks in advance!

// app.js

angular.module('flapperNews', ['ui.router', 'templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
        url: '/home',
        templateUrl: 'home/_home.html',
        controller: 'MainCtrl',
        resolve: {
            postPromise: ['posts', function(posts){
                return posts.getAll();
            }]
        }
    }).state('posts', {
        url: '/posts/{id}',
        templateUrl: 'posts/_posts.html',
        controller: 'PostsCtrl'
    });
    $urlRouterProvider.otherwise('home');
}]);

// mainCtrl.js

angular.module('flapperNews')
.controller('MainCtrl', [
    '$scope',
    '$posts',
    function($scope){
        $scope.test = 'Hello world!';

        $scope.posts = posts.posts;

        $scope.addPost = function(){
            if(!$scope.title || $scope.title === '') { return; }
            $scope.posts.push({
                title: $scope.title,
                link: $scope.link,
                upvotes: 0
            });
            $scope.title = '';
            $scope.link = '';

            $scope.posts.push({
                title: $scope.title,
                link: $scope.link,
                upvotes: 0,
                comments: [
                    {author: 'Joe', body: 'Cool post!', upvotes: 0},
                    {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
                ]
            });
        };

        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };


    }]);

// postsCtrl.js

angular.module('flapperNews')
.controller('PostsCtrl', [
        '$scope',
        '$stateParams',
        'posts',

    function($scope, $stateParams, posts){

        $scope.post = posts.posts[$stateParams.id];

        $scope.addComment = function(){
            if($scope.body === '') { return; }
            $scope.post.comments.push({
                body: $scope.body,
                author: 'user',
                upvotes: 0
            });
            $scope.body = '';
        };


    }]);

// application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= angular-rails-templates
//= require angular-ui-router
//= require_tree .

//application.html.erb

<!DOCTYPE html>
<html ng-app="flapperNews">
<head>
  <title>FlapperNews</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="flapperNews">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
    </div>
  </div>
</body>
</html>

Upvotes: 2

Views: 1639

Answers (2)

BroiSatse
BroiSatse

Reputation: 44675

You missed require:

//= angular-rails-templates

should be

//= require angular-rails-templates

BTW - you need to specify the order of javascript files to be loaded. If at any point assets pipeline will decide to load your controller before your app, you will get angular exception, so you should add //= require app statement to your controller file as well.

Upvotes: 4

Mobaz
Mobaz

Reputation: 595

You need to add all of your javascript into your index.html page, so your index.html should look something like this:

<!DOCTYPE html>
<html ng-app="flapperNews">
<head>
  <title>FlapperNews</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="flapperNews">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
    </div>
  </div>

<!-- this could be a bower location or a straight download-->

<script type="text/javascript" src="/path/to/your/angular.js></script>
<script type="text/javascript" src="/path/to/your/templates.js></script>
etc.


</body>
</html>

Upvotes: 0

Related Questions