Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

AngularJS not defined controller

angularjs; controller;

Best Answer Wolverine89, 10 May 2015 - 12:04 PM

Hi guys,

 

I fixed my code ! sort of ! I required the game_controller.js in the app.js but the next error appears any a suggestion how i can solve this.

 

Uncaught ReferenceError: app is not defined2 @ game_controller.js:3s @ _prelude.js:1(anonymous function) @ _prelude.js:11.../partials/game/game_controller.js @ app.js:11s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1

 

I use brackets as SDK and if i type in ap.... brackets allready suggest app so it is recognized in that file.

 

'use strict';
 
// Create Mahjong_Mayhem app
var angular = require('angular');
var app = angular.module('Mahjong_Mayhem', [ 
    'ngRoute', 
]);
 
// Include dependencies
require('angular-route');
require('../partials/game/game_controller.js');
 
// Creating routes
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home',{
            templateUrl: 'partials/home/home.html'
    }).
        when('/game/list', {
            templateUrl: 'partials/game/game_list.html',
            controller: 'ListController'
    }).
        when('/game/new', {
            templateUrl: 'partials/game/game_create.html'
    }).
    otherwise({
        redirectTo: '/home'
    });  
}]);

 

'use strict';
 
app.controller('ListController', ['$scope', '$http', function($scope, $http) {
    $http.get("http://mahjongmayhem.herokuapp.com/games").success(function(data){
        console.log(data);
        $scope.games = data;
    });
}]);
Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1 Wolverine89

Wolverine89

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 09 May 2015 - 11:06 AM

Hi guys,

 

I get the following error !

 

Error: [ng:areq] Argument 'ListController' is not a function, got undefined

    at REGEX_STRING_REGEXP (http://localhost:808.../app.js:1095:12)
    at compositeLinkFn (http://localhost:808.../app.js:8149:13)
    at $get.boundTranscludeFn (http://localhost:808.../app.js:8167:16)
 
This is my code !
 

<html lang="en" ng-app="Mahjong_Mayhem">
    
    <header>
        <title>Mahjong Mayhem</title>
        <!-- The css is copied into dist/css/app.css by the grunt copy task -->
        <link rel="stylesheet" type="text/css" href="css/app.css">
    </header>
    
    <body>
        <div class="main" ng-view></div>
        <script src="js/app.js"></script>
    </body>
    
</html>

 

'use strict';
 
// Create Mahjong_Mayhem app
var angular = require('angular');
var app = angular.module('Mahjong_Mayhem', [ 
    'ngRoute', 
]);
 
// Include dependencies
require('angular-route');
 
// Creating routes
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home',{
            templateUrl: 'partials/home/home.html'
    }).
        when('/game/list', {
            templateUrl: 'partials/game/game_list.html',
            controller: 'ListController'
    }).
        when('/game/new', {
            templateUrl: 'partials/game/game_create.html'
    }).
    otherwise({
        redirectTo: '/home'
    });  
}]);

 

'use strict';
 
app.controller('ListController', ['$scope', '$http', function($scope, $http) {
    $http.get("http://mahjongmayhem.herokuapp.com/games").success(function(data){
        console.log(data);
        $scope.games = data;
    });
}]);

 

<ul>
    <li ng-repeat="game in games">
        <p>{{game._id}}</p>
    </li>
</ul>

 
Thanks in advance!

 

 



#2 PBJ

PBJ

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 176 posts

Posted 09 May 2015 - 11:33 AM

Are you using a scaffolding framework like Yeoman? From the looks of your index.html it looks like you're missing a few things that the angular generator would take care of for you (specifically upon grunt build - updating your scripts, app.js, etc.). I would suggest you learn how to use it (it makes webapp development much more streamlined). But, if you want to stick to writing everything/maintaining manually, does

grunt jshint

show any issues? From what I am seeing, in your index.html you appear to be missing the script ref to your .js file which holds your ListController. Please use the Yeoman scaffolding tool, and get back to your current status; as it stands it's very hard to debug what's exactly wrong. 


Edited by PBJ, 09 May 2015 - 11:36 AM.


#3 Wolverine89

Wolverine89

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 09 May 2015 - 12:05 PM

I have some constraints developing this application. I need to use Grunt, Browserify , AngularJS and SASS !

In my index.html the script refers to app.js. Grunt and browserify refers to the dependencies..

 

module.exports = function (grunt) {
    grunt.initConfig({
        browserify: {
            js: {
                external: ['angular'],
                src: 'app/js/app.js',
                dest: 'dist/js/app.js',
                options: {
                    debug: true,
                    browserifyOptions: { debug: true }
                }
            }
        },
        copy: {
            all: {
               // This copies all the html and css into the dist/ folder
               expand: true,
               cwd: 'app/',
               src: ['**/*.html', '**/*.css'],
               dest: 'dist/',
            }
        },
        watch: {
            js: {
               files: "app/**/*.js",
               tasks: "browserify"
            },
            html: {
               files: 'app/**/*.html',
               tasks: 'copy'
            },
            css: {
               files: 'app/**/*.css',
               tasks: 'copy'
            }
        }
    });
        
    // Load the npm installed tasks
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-watch');
 
    // The default tasks to run when you type: grunt
    grunt.registerTask('default', ['browserify', 'copy', 'watch']);
};

Edited by Wolverine89, 09 May 2015 - 12:06 PM.


#4 PBJ

PBJ

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 176 posts

Posted 09 May 2015 - 03:26 PM

Yeoman will set up all of that for you... the only change you'd have to make being the work you did in order to get Browserify in your project. Also, not entirely sure why you're showing me your gruntfile, that doesn't tell me anything.



#5 Wolverine89

Wolverine89

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 09 May 2015 - 03:57 PM

Using Yeoman is not an option! Do you have some other suggestions? Is there a fault in my code ? 



#6 PBJ

PBJ

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 176 posts

Posted 09 May 2015 - 04:09 PM

I already made suggestions, but you didn't seem to do them. Also, why can't you use Yeoman?


Edited by PBJ, 09 May 2015 - 04:09 PM.


#7 Wolverine89

Wolverine89

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 10 May 2015 - 12:04 PM   Best Answer

Hi guys,

 

I fixed my code ! sort of ! I required the game_controller.js in the app.js but the next error appears any a suggestion how i can solve this.

 

Uncaught ReferenceError: app is not defined2 @ game_controller.js:3s @ _prelude.js:1(anonymous function) @ _prelude.js:11.../partials/game/game_controller.js @ app.js:11s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1

 

I use brackets as SDK and if i type in ap.... brackets allready suggest app so it is recognized in that file.

 

'use strict';
 
// Create Mahjong_Mayhem app
var angular = require('angular');
var app = angular.module('Mahjong_Mayhem', [ 
    'ngRoute', 
]);
 
// Include dependencies
require('angular-route');
require('../partials/game/game_controller.js');
 
// Creating routes
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home',{
            templateUrl: 'partials/home/home.html'
    }).
        when('/game/list', {
            templateUrl: 'partials/game/game_list.html',
            controller: 'ListController'
    }).
        when('/game/new', {
            templateUrl: 'partials/game/game_create.html'
    }).
    otherwise({
        redirectTo: '/home'
    });  
}]);

 

'use strict';
 
app.controller('ListController', ['$scope', '$http', function($scope, $http) {
    $http.get("http://mahjongmayhem.herokuapp.com/games").success(function(data){
        console.log(data);
        $scope.games = data;
    });
}]);


#8 Wolverine89

Wolverine89

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 11 May 2015 - 03:40 AM

?






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download