CODEWITHSUNDEEP
angularjsroutes
Amon
Amon

Reputation: 2951

One of my angular controllers are not being found

Okay I know this question has been asked a lot but I'm really not sure what I've missed. This code was working at one point, I left it for a while, then added another route (login) and now RegisterController isn't working. I'm getting Error: [ng:areq] Argument 'RegisterController' is not a function, got undefined

routing:

(function () {
  'use strict';

  angular
    .module('thinkster.routes')
    .config(config);

  config.$inject = ['$routeProvider'];

  /**
  * @name config
  * @desc Define valid application routes
  */
  function config($routeProvider) {
    $routeProvider.when('/register', {
      controller: 'RegisterController', 
      controllerAs: 'vm',
      templateUrl: '/static/templates/authentication/register.html'
    }).when('/login', {
       controller: 'LoginController',
       controllerAs: 'vm',
       templateUrl: '/static/templates/authentication/login.html'
    }).otherwise('/');
  };
})();

register.controller.js

/**
* Register controller
* @namespace thinkster.authentication.controllers
*/
(function () {
  'use strict';

  angular
    .module('thinkster.authentication.controllers', [])
    .controller('RegisterController', RegisterController);

  RegisterController.$inject = ['$location', '$scope', 'Authentication'];

  /**
  * @namespace RegisterController
  */
  function RegisterController($location, $scope, Authentication) {
    var vm = this;

    vm.register = register;

    activate();

    /**
    * @name activate
    * @desc Actions to be performed when this controller is instantiated
    * @memberOf thinkster.authentication.controllers.RegisterController
    */
    function activate() {
     // If the user is authenticated, they should not be here.
      if (Authentication.isAuthenticated()) {
       $location.url('/');
      }
    }

    /**
    * @name register
    * @desc Register a new user
    * @memberOf thinkster.authentication.controllers.RegisterController
    */

    // this will store the status so I can access it in the HTML
    vm.error_status = ''

    function register() {
      // if t
      Authentication.register(vm.email, vm.password, vm.username).catch(function errorCallback(error){
        //save the result of the promise to a variable
        //var result = error.status;
        vm.error_status += error.status
        console.log(vm.error_status)
      })
    }

  }
})();

But my LoginController is loaded just fine:

/**
* Register controller
* @namespace thinkster.authentication.controllers
*/
(function () {
  'use strict';

  angular
    .module('thinkster.authentication.controllers', [])
    .controller('LoginController', LoginController);

  LoginController.$inject = ['$location', '$scope', 'Authentication'];

  /**
  * @namespace RegisterController
  */
  function LoginController($location, $scope, Authentication) {
    var vm = this;

    vm.login = login;

    activate();

    /**
    * @name register
    * @desc Register a new user
    * @memberOf thinkster.authentication.controllers.RegisterController
    */

    // this will store the status so I can access it in the HTML
    vm.error_status = ''


    function activate() {
      //If the user is authenticated, they should not be here

      if (Authentication.isAuthenticated()) {
        $location.url('/')
      }
    }

    function login() {
      Authentication.login(vm.email, vm.password)
    }
  }
})();

javascripts.html:

{% load compress %}
{% load staticfiles %}

{% compress js %}
<script type="text/javascript" src="{% static 'bower_components/jquery/dist/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap/dist/js/bootstrap.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/material.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/ripples.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/underscore/underscore.js' %}"></script>

<script type="text/javascript" src="{% static 'bower_components/angular/angular.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/angular-route/angular-route.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/angular-cookies/angular-cookies.js' %}"></script>

<script type="text/javascript" src="{% static 'bower_components/ngDialog/js/ngDialog.js' %}"></script>
<script type="text/javascript" src="{% static 'lib/snackbarjs/snackbar.min.js' %}"></script>

<script type="text/javascript" src="{% static 'javascripts/thinkster.js' %}"></script>

<script type="text/javascript" src="{% static 'javascripts/thinkster.config.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/thinkster.routes.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/authentication.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/services/authentication.service.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/register.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/login.controller.js' %}"></script>
{% endcompress %}

The routing is working, because if I change the name of "RegisterController" to say "RegController" that's the name that appears in the console log. Can anyone spot any problems here?

Also, is there an app or something that can give me more detailed traceback of where my files are going wrong?

Upvotes: 0

Views: 36

Answers (1)

BąQ
BąQ

Reputation: 306

Charles Smith, you should create one module thinkster.authentication.controllers

e.g. 

(function () {
   'use strict';
    angular.module('thinkster.authentication.controllers', []);
})();

and then adding new cotrollers to this module like this:

(function () {
  'use strict';

 angular.module('thinkster.authentication.controllers')
        .controller('LoginController', LoginController);

 LoginController.$inject = ['$location', '$scope', 'Authentication'];

 [...]
)();

adding array as second parameter of angular.module triggers recreating this module, but you are using one module name.

Upvotes: 1

Related Questions