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

Question

I'm trying to get ui-router to work and I'm getting pretty close. Well I got it working, but I can't combine it with my controller, then I'm getting errors.

I'm getting this error in the console

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

searchCtrl.js

var myApp = angular.module('myApp')

  .controller('searchCtrl', [

    '$scope', '$http', function($scope, $http) {

      $scope.search = function() {

        var base = 'http://api.themoviedb.org/3';
        var service = '/search/movie';
        var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
        var search = $scope.searchquery
        var callback = 'JSON_CALLBACK'; // provided by angular.js
        var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;

        $http.jsonp(url,{ cache: true}).
          success(function (data, status, headers, config) {

            if (status == 200) {
              $scope.movieList = data.results;
              console.log($scope.movieList)
            } else {
              console.error('Error happened while getting the movie list.')
            }

          }).
          error(function (data, status, headers, config) {
            console.error('Error happened while getting the movie list.')
          });
      }

    }
]);

My searchModule.js

var app = angular.module('movieseat', ['ui.router']).config([

  '$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/state1');
    return $stateProvider.state('state1', {
      url: '/state1',
      templateUrl: 'assets/angular-app/templates/state1.html'
    });
  }

]);

And my app.js.coffee

@app    = angular.module('movieseat', []);
@myApp  = angular.module('myApp',[]);

# for compatibility with Rails CSRF protection

@app.config([
  '$httpProvider', ($httpProvider)->
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])

@app.run(->
  console.log 'angular app running'
)

This might be the same question and I've tried adding another module to my app.js.coffee but it's not working.

Does anyone have a tip?

Do you want to create two different modules here? If answer is yes then inject myApp module into movieseat. Here which module you are binding with template? — Satyam Koyani, Aug 11 '15 at 11:26
@SatyamKoyani I don't think I want 2 modules. The `searchCtrl.js` is a controller which alowes users to make a search action. And the `searchModule` is a module which includes a template. So maybe I'm wrong in declaring a module in the `searchCtrl.js`? — Peter Boomsma, Aug 11 '15 at 11:36

Satyam Koyani · Accepted Answer · 2015-08-11T11:43:21.777

Change first two module declaration line of your app.js.coffee like below.

@myApp  = angular.module('myApp',[]);    
@app    = angular.module('movieseat', ['myApp','ui.router']);

and then in searchModule.js

angular.module('movieseat').config([

  '$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/state1');
    return $stateProvider.state('state1', {
      url: '/state1',
      templateUrl: 'assets/angular-app/templates/state1.html'
    });
  }

]);

REASON : Here you are basically overriding the module you previously created insted you just need to use that already declared module.

If you are doing with single module then

@app    = angular.module('movieseat', ['myApp','ui.router']);

# for compatibility with Rails CSRF protection

@app.config([
  '$httpProvider', ($httpProvider)->
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])

@app.run(->
  console.log 'angular app running'
)

and

angular.module('movieseat').config([

  '$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/state1');
    return $stateProvider.state('state1', {
      url: '/state1',
      templateUrl: 'assets/angular-app/templates/state1.html'
    });
  }

]);

and your controller looks like

angular.module('movieseat')

  .controller('searchCtrl', [

    '$scope', '$http', function($scope, $http) {

      $scope.search = function() {

        var base = 'http://api.themoviedb.org/3';
        var service = '/search/movie';
        var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
        var search = $scope.searchquery
        var callback = 'JSON_CALLBACK'; // provided by angular.js
        var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;

        $http.jsonp(url,{ cache: true}).
          success(function (data, status, headers, config) {

            if (status == 200) {
              $scope.movieList = data.results;
              console.log($scope.movieList)
            } else {
              console.error('Error happened while getting the movie list.')
            }

          }).
          error(function (data, status, headers, config) {
            console.error('Error happened while getting the movie list.')
          });
      }

    }
]);

Thanks! Clear explanation. But I'm going to have to do some more research in the whole controller/module part because the difference isn't totally clear. — Peter Boomsma, Aug 11 '15 at 11:44
Cool, Happy to help you. Let me know if you find any difficulties in understanding this. !! — Satyam Koyani, Aug 11 '15 at 11:45
I sure will, doing the https://thinkster.io/angular-rails/ tutorial now, so I'm guessing it wont be long before I'm stuck again ;). — Peter Boomsma, Aug 11 '15 at 11:52

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

1 Answers1