I've been working through the tutorial on implementing an Angular JS / Ruby on Rails app from Thinkster and have encountered a problem.
Despite my controllers being listed in the page's sources when inspecting the content, they are not being recognized. This issue is noted in the console error message:
Error: [ng:areq] Argument 'NavCtrl' is not a function, got undefinedI've exhaustively searched online for solutions without success. At this point, I suspect it might be related to the version of Angular or Rails, a gem, dependency, or something that has eluded me. It could even be a simple typo that I am overlooking!
As a result, the page loads blank except for the content in the navigation bar, which appears without any controller logic. I will provide some code below, and if further information is required for a solution, please let me know.
This is the snippet from 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>
The following code is from app.js, which includes the app module and view configuration:
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 important to mention that between the two files above,
<div ng-include="'nav/_nav.html'"></div><ui-view></ui-view> remains empty (irrelevant link).
Now, here's the missing piece - 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 = {};
});
}]);
After examining the console, timeline, and sources, it seems that all the necessary files are loading in the correct order. Please assist me with resolving this issue!
Thank you, Steve.