Question

所以我在这里关注教程：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

我很确定我已经在“angular”之后将它放在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>

Answer 1

您错过了require：

//= angular-rails-templates

应该是

//= require angular-rails-templates

BTW - 你需要指定要加载的javascript文件的顺序。如果资产管道在任何时候决定在您的应用程序之前加载您的控制器，您将获得角度异常，因此您也应该将//= require app语句添加到您的控制器文件中。

Answer 2

您需要将所有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>

AngularJS错误：[$ injector：nomod]在尝试加载＆＃39;模板时

2 个答案: