2015-04-11 3 views
1

Так я после урока прямо здесь: https://thinkster.io/angular-rails/

Я нахожусь в части «Электропроводка все вверх». Я еще новичок в этом, и я получаю эту ошибку:

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 
[email protected]://localhost:3000/assets/angular/angular-4d9f3d92a489ec19b3256abf7e10c0fd.js?body=1:1699:38 

Я довольно уверен, что я положил его в application.js сразу после «угловой». Я тоже добавляю свои контроллеры. Структура такая же в учебнике в моей ссылке. Заранее спасибо!

// 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> 

ответ

4

Вы пропустили require:

//= angular-rails-templates 

должен быть

//= require angular-rails-templates 

BTW - вы должны указать порядок файлов JavaScript для загрузки , Если в какой-либо точке трубопроводы активов решат загрузить ваш контроллер перед вашим приложением, вы получите угловое исключение, поэтому вы должны добавить оператор //= require app в файл вашего контроллера.

+0

Ну вот неудобно. Спасибо! – bitfrost41

+0

@ bitfrost41 - Не стоит беспокоиться, как только я потратил два часа на поиск отсутствующих '=' в этих комментариях. – BroiSatse

+0

Прохладный. Я собираюсь закончить этот учебник сейчас, и это, вероятно, не мой последний вопрос. : D – bitfrost41

0

Вы должны добавить все ваши JavaScript в вашу страницу index.html, так что ваш index.html должен выглядеть следующим образом:

<!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> 
+0

Они будут автоматически добавлены по конвейеру активов в процессе разработки и будут объединены в один файл в процессе производства. – BroiSatse

+0

Ох - я вижу - я не использую рельсы, поэтому не знаю, как это работает – Mobaz

+0

Да, он прав. Это в моем активе. Во всяком случае, на него ответил выше. : D – bitfrost41

Смежные вопросы