Angular JS / Ruby on Rails-控制器无法识别错误

Question

I've been following the Thinkster tutorial for implementing an Angular JS / Ruby on Rails app and have run into a little difficulty. 我一直在关注Thinkster教程，以实现Angular JS / Ruby on Rails应用程序，但遇到了一些困难。

My controllers aren't being recognised, despite being listed in the page's sources when inspecting the content. 尽管在检查内容时页面的源代码中列出了我的控制器，但我的控制器没有被识别。 This is highlighted through the console error Error: [ng:areq] Argument 'NavCtrl' is not a function, got undefined . 此错误通过控制台错误突出显示Error: [ng:areq] Argument 'NavCtrl' is not a function, got undefined 。

I've tried everything I've been able to find online, to no avail. 我已经尝试了所有可以在网上找到的内容，但无济于事。 My only guess at present is it's due to the version of Angular, Rails, a gem, dependency - or something I just haven't considered. 我目前唯一的猜测是它是由于Angular，Rails，gem，依赖项的版本-或我只是没有考虑过的某些原因。 Or it's a typo, but I'm not spotting it! 还是错别字，但我没发现！

The end result is a blank page loading, except for the nav bar's content, which renders with no controller logic. 最终结果是加载了空白页面，但导航栏的内容除外，该内容没有控制器逻辑即可呈现。 I'll show some code below, and if anything else is needed for an answer, let me know. 我将在下面显示一些代码，如果需要其他任何答案，请告诉我。

Here's application.html.erb : 这是application.html.erb ：

<!DOCTYPE html>
<html>
<head>
  <title>Angular JS</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<!-- body -->
  <body ng-app="flapperNews">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div ng-include="'nav/_nav.html'"></div>
        <ui-view></ui-view>
      </div>
    </div>
    <h1>DEBUG</h1>
  </body>
</html>

app.js which contains the app module and the view config: app.js ，其中包含应用程序模块和视图配置：

angular.module('flapperNews', ['ui.router', 'templates', 'Devise'])
.config([ 
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl'
    }) 
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts/_posts.html',
      controller: 'PostsCtrl'
    })
    .state('login', {
      url: '/login',
      templateUrl: 'auth/_login.html',
      controller: 'AuthCtrl',
      onEnter: ['$state', 'Auth', function($state, Auth) {
        Auth.currentUser().then(function (){
          $state.go('home');
        });
      }]
    }) 
    .state('register', {
      url: '/register',
      templateUrl: 'auth/_register.html',
      controller: 'AuthCtrl',
      onEnter: ['$state', 'Auth', function($state, Auth) {
        Auth.currentUser().then(function (){
          $state.go('home');
        });
      }]
    });

  $urlRouterProvider.otherwise('home');
}]);

It's worth noting, between the two files above, <div ng-include="'nav/_nav.html'"></div> is at least rendering some Angular content, while the <ui-view></ui-view> shows 'nothing at all' ( irrelevant link ). 值得注意的是，在上面的两个文件之间， <div ng-include="'nav/_nav.html'"></div>至少呈现了一些 Angular内容，而<ui-view></ui-view>显示“一无所有”（不相关的链接）。

Here's the AWOL navCtrl.js : 这是AWOL navCtrl.js ：

angular.module('flapperNews')
.controller('NavCtrl', [
'$scope',
'Auth',
function($scope, Auth){
  console.log('nav controller loaded');
  $scope.signedIn = Auth.isAuthenticated;
  $scope.logout = Auth.logout;
  Auth.currentUser().then(function (user){
    $scope.user = user;
  });
  $scope.$on('devise:new-registration', function (e, user){
    $scope.user = user;
  });

  $scope.$on('devise:login', function (e, user){
    $scope.user = user;
  });

  $scope.$on('devise:logout', function (e, user){
    $scope.user = {};
  });
}]);

Looking at the console, timeline and sources it seems all the relevant files are loading, and in the right order. 查看控制台，时间轴和源，似乎所有相关文件都以正确的顺序加载。 So please help! 所以请帮忙！

Thanks, Steve. 谢谢，史蒂夫。

Answer 1

I think you forgot to include 'resolve: {....}' in .state('posts'... and .state('home'... 我认为您忘记了在.state（'posts'...和.state（'home'...

.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:'PostCtrl',
        resolve: {
            post: ['$stateParams', 'posts', function($stateParams, posts) {
                return posts.get($stateParams.id);
                }]
            }
    })

Angular JS / Ruby on Rails-控制器无法识别错误

问题描述

1 个解决方案

解决方案1
0 2015-03-26 08:37:27

Angular JS / Ruby on Rails-控制器无法识别错误

问题描述

1 个解决方案

解决方案1 0 2015-03-26 08:37:27

解决方案1
0 2015-03-26 08:37:27