ruby-on-rails - AngularJS错误: [$injector:nomod] when trying to load 'templates'

标签 ruby-on-rails angularjs

所以我在这里遵循教程: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
ensure@http://localhost:3000/assets/angular/angular-4d9f3d92a489ec19b3256abf7e10c0fd.js?body=1:1699:38

我很确定我已经将它放在 application.js 中“Angular”之后。我也在这里添加我的 Controller 。我的链接中的教程的结构是相同的。提前致谢!

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

最佳答案

您错过了require:

//= angular-rails-templates

应该是

//= require angular-rails-templates

顺便说一句 - 您需要指定要加载的 javascript 文件的顺序。如果 Assets 管道在任何时候决定在应用程序之前加载 Controller ,您将得到 Angular 异常,因此您也应该将 //= require app 语句添加到您的 Controller 文件中。

关于ruby-on-rails - AngularJS错误: [$injector:nomod] when trying to load 'templates' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29582149/

相关文章:

ruby-on-rails - ActiveAdmin 和 CircleCI : autoloader causes Postgres to fail

ruby-on-rails - 如何在一个数组中多次重复单个散列?

angularjs - 我怎样才能干掉Angularfire session 授权($onAuthStateChanged)

javascript - 分离然后附加 AngularJS 表单更改有效性状态

json - 使用 angular http.post 方法发布 - xmlhttprquest 无法加载服务

ruby-on-rails - 在 rails 中一次更新多条记录

html - 如何在 Ruby on Rails 中使用 Nokogiri 从 HTML 中查找具有代表性的图像

ruby-on-rails - 在 Bluehost 上部署 Rails 应用程序

javascript - Angular ui-router 提交表单并重定向页面

javascript - 当输入集中时,不会更新 ng-model