简体   繁体   中英

Angular JS / Ruby on Rails - controller not recognised error

I've been following the Thinkster tutorial for implementing an Angular JS / Ruby on Rails app and have run into a little difficulty.

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 .

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. 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 :

<!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:

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 ).

Here's the 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.

I think you forgot to include 'resolve: {....}' in .state('posts'... and .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);
                }]
            }
    })

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM