CODEWITHSUNDEEP
angularjs
dwilbank
dwilbank

Reputation: 2520

controller not defined - but why?

so while working with this fine rails-angular tutorial

I do this in my app.js

var receta = angular.module('receta',[
    'templates',
    'ngRoute',
    'controllers'
]);
...
var controllers = angular.module('controllers', []);
controllers.controller('RecipesController', RecipesControllerFunc);
RecipesController.$inject = ['$scope', '$routeParams', '$location'];
//^ ^ ^ ^ gives me `RecipesController is not defined`
function RecipesControllerFunc($scope,$routeParams,$location){
    $scope.search = function(keywords) {
        $location.path('/').search('keywords', keywords)
    }

    if($routeParams.keywords){
        keywords = $routeParams.keywords.toLowerCase();
        $scope.recipes = recipes.filter(function(recipe){
            return (recipe.name.toLowerCase().indexOf(keywords) != -1)
        })
    } else {
        $scope.recipes = [];
    }
    console.log(recipes);
};

I've used this $inject syntax in other projects with no problem, and controllers is certainly defined...

So why isn't RecipesController being defined here?

P.S. When I use the usual 'dependencies + function in an array' syntax, everything works. But I want the $inject syntax to work.

Upvotes: 0

Views: 107

Answers (2)

Dvir
Dvir

Reputation: 3339

You have typo. You have been registered the function RecipesControllerFunc but you trying to inject the services to RecipesController which are not exists I guess.

I can't see the code in the middle so ... I hope it gave you the direction.

UPDATE: I changed RecipesController function name to the right one which is RecipesControllerFunc.

var receta = angular.module('receta',[
    'templates',
    'ngRoute',
    'controllers'
]);
// Some middle code
var controllers = angular.module('controllers', []);
controllers.controller('RecipesController', RecipesControllerFunc);
RecipesControllerFunc.$inject = ['$scope', '$routeParams', '$location'];
//^ ^ ^ ^ gives me `RecipesController is not defined`
function RecipesControllerFunc($scope,$routeParams,$location){
    $scope.search = function(keywords) {
        $location.path('/').search('keywords', keywords)
    }

    if($routeParams.keywords){
        keywords = $routeParams.keywords.toLowerCase();
        $scope.recipes = recipes.filter(function(recipe){
            return (recipe.name.toLowerCase().indexOf(keywords) != -1)
        })
    } else {
        $scope.recipes = [];
    }
    console.log(recipes);
};

Upvotes: 1

Ralph Sto. Domingo
Ralph Sto. Domingo

Reputation: 398

If RecipesControllerFunc does not exist in the middle part of your code, then the error is in how you registered RecipesController without RecipesControllerFunc being defined.

Try this:

var receta = angular.module('receta',[
    'templates',
    'ngRoute',
    'controllers'
]);
...
var controllers = angular.module('controllers', []);
function RecipesControllerFunc($scope,$routeParams,$location){
    $scope.search = function(keywords) {
        $location.path('/').search('keywords', keywords)
    }

    if($routeParams.keywords){
        keywords = $routeParams.keywords.toLowerCase();
        $scope.recipes = recipes.filter(function(recipe){
            recipe.name.toLowerCase().indexOf(keywords) != -1
        })
    } else {
        $scope.recipes = [];
    }

};

controllers.controller('RecipesController', RecipesControllerFunc);
RecipesController.$inject = ['$scope', '$routeParams', '$location'];

Upvotes: 1

Related Questions