Argument 'myController' is not a function, got undefined

Question

I'm trying to setup some controllers in my angular app but I'm not sure why I can't make them working, since I think I'm using similar approach as I've done before.

I declared app.js file:

'use strict';

var modules = [
    'app.controllers',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'ui.router',
    'LocalStorageModule',
    'angular-loading-bar'
];

var app = angular.module('app', modules);

app.config(function($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
})

app.factory('forgotPasswordService', ['$http', function ($http) {

    var fac = {};

    fac.forgotPassword = function (forgotPasswordData) {
        return $http.post('/api/Account/ForgotPassword', forgotPasswordData)
    };

    return fac;

}])

app.factory('signUpService', ['$http', function ($http) {

    var signUpServiceFactory = {};

    signUpServiceFactory.saveRegistration = function (registration) {
        return $http.post('/api/account/register', registration);
    };

    return signUpServiceFactory;
}]);

Then controllers.js file with this content:

angular.module('app.controllers', [])
    .controller('signupController', [
        '$scope', '$window', 'signUpService',
        function($scope, $window, signUpService) {
            $scope.init = function() {
                $scope.isProcessing = false;
                $scope.RegisterBtnText = "Register";
            };

            $scope.init();
            $scope.IsLimitedCompany = null;
            $scope.registration = {
                Email: "",
                Password: "",
                ConfirmPassword: ""
            };

            $scope.signUp = function() {
                $scope.isProcessing = true;
                $scope.RegisterBtnText = "Please wait...";
                signUpService.saveRegistration($scope.registration).then(function(response) {
                    alert("Registration Successfully Completed. Please sign in to Continue.");
                    $window.location.href = "login.html";
                }, function() {
                    alert("Error occured. Please try again.");
                    $scope.isProcessing = false;
                    $scope.RegisterBtnText = "Register";
                });
            };
        }
    ]);

And my html file:

<!DOCTYPE html>
<!--[if !IE]><!-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <script src="/Metronic/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-cookies.min.js"></script>
    <script src="/Scripts/angular-resource.min.js"></script>
    <script src="/Scripts/angular-sanitize.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/angular-ui-router.min.js"></script>
    <script src="/Angular/app.js"></script>
    <script src="/Angular/controllers.js"></script>
    <script src="/Scripts/angular-local-storage.min.js"></script>
    <script src="/Scripts/loading-bar.min.js"></script>
    <script src="/Angular/Services/authInterceptorService.js"></script>
</head>
<body class="login">
    <div class="content" ng-app="app">
        <!-- BEGIN REGISTRATION FORM -->
        <div class="register-form" ng-controller="signupController">
            <h3 class="font-green">Sign Up</h3>
            <p class="hint"> Enter your account details below: </p>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Email</label>
                <input class="form-control placeholder-no-fix" ng-model="registration.Email" type="text" autocomplete="off" placeholder="Email" name="username" />
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Password</label>
                <input class="form-control placeholder-no-fix" ng-model="registration.Password" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Re-type Your Password</label>
                <input class="form-control placeholder-no-fix" ng-model="registration.ConfirmPassword" type="password" autocomplete="off" placeholder="Re-type Your Password" name="rpassword" />
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Role</label>
                <select name="role" ng-change="CheckRole()" ng-model="registration.Role" class="form-control">
                    <option value="">Role</option>
                    <option value="Borrower">Borrower</option>
                    <option value="Introducer">Introducer</option>
                    <option value="Investor">Investor</option>
                    <option value="Valuer">Valuer</option>
                </select>
            </div>
            <div class="form-actions">
                <button type="button" id="register-back-btn" class="btn green btn-outline">Back</button>
                <button type="submit" id="register-submit-btn" class="btn btn-success uppercase pull-right" ng-click="signUp()" ng-disabled="isProcessing" value="{{RegisterBtnText}}">
                    Submit
                </button>
            </div>
        </div>
        <!-- END REGISTRATION FORM -->
    </div>
</body>
</html>

Any idea what am I missing?

I'm getting this error:

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

Answer 1

You have included JS file in wrong order.

Currently it is

<script src="/Angular/app.js"></script>
<script src="/Angular/controllers.js"></script>

Because of this your app.js not getting the defination of app.controllers.

Its should be like this one

<script src="/Angular/controllers.js"></script>
<script src="/Angular/app.js"></script>

Argument 'myController' is not a function, got undefined

Question

1 answers

solution1
1 ACCPTED 2016-06-26 10:41:17

Argument 'myController' is not a function, got undefined

Question

1 answers

solution1 1 ACCPTED 2016-06-26 10:41:17

solution1
1 ACCPTED 2016-06-26 10:41:17