AngularJS错误[$ injector：modulerr]

Question

Sorry for big piece of code but I've got a problem with my AngularJS module, created in accordance with these lessons . I want my angular module to work with ASP.NET MVC, but I can't even run it.

(function () {
    var AAngScript = angular.module('AAngScript', ['ngRoute']);
    AAngScript.controller('LoginController', ['$scope', '$routeParams', '$location', 'LoginFactory', function ($scope,
        $routeParams, $location, LoginFactory) {
        $scope.loginForm = {
            emailAdress: '',
            password: '',
            rememberMe: false,
            returnUrl: $routeParams.returnUrl,
            loginFailure: false
        };
        $scope.login = function () {
            var result = LoginFactory($scope.loginForm.emailAdress, $scope.loginForm.password, $scope.loginForm.rememberMe);
            result.then(function (result) {
                if (result.success) {
                    if ($scope.loginForm.returnUrl !== undefined) {
                        $location.path('/productcategory');
                    } else {
                        $location.path($scope.loginForm.returnUrl);
                    }
                } else {
                    $scope.loginForm.loginFailure = true;
                }
            });
        }
    }]);
    AAngScript.controller('RegisterController', ['$scope', '$location', 'RegistrationFactory', function ($scope, $location, RegistrationFactory) {
        $scope.registerForm = {
            emailAdress: '',
            password: '',
            confirmPassword: '',
            registrationFailure: false
        };

        $scope.register = function () {
            var result = RegistrationFactory($scope.registerForm.emailAdress, $scope.registerForm.password, $scope.registerForm.confirmPassword);
            result.then(function (result) {
                if (result.success) {
                    $location.path('/routeOne');
                } else {
                    $scope.registerForm.registrationFailure = true;
                }
            });
        }
    }]);
    AAngScript.factory('AuthHttpResponseInterceptor', ['$q', '$location', function ($q, $location) {
        return {
            response: function (response) {
                if (response.status === 401) {
                    console.log("Response 401");
                }
                return response || $q.when(response);
            },
            responseError: function (rejection) {
                if (rejection.status === 401) {
                    console.log("Response Error 401", rejection);
                    $location.path('/login').search('retutnUrl', $location.path());
                }
                return $q.reject(rejection);
            }
        }
    }]);
    AAngScript.factory('LoginFactory', ['$http', '$q', function ($http, $q) {
        return function (emailAdress, password, rememberMe) {

            var deferredObject = $q.defer();

            $http.post(
                '/Account/Login', {
                    Email: emailAdress,
                    Password: password,
                    RememberMe: rememberMe
                }
            ).
            success(function (data) {
                if (data == "True") {
                    deferredObject.resolve({ success: true })
                } else {
                    deferredObject.resolve({ success: false })
                }
            }).
            error(function () {
                deferredObject.resolve({ success: false })
            });

            return deferredObject.promise;
        }
    }]);
    AAngScript.factory('RegistrationFactory', ['$http', '$q', function ($http, $q) {
        return function (emailAdress, password, confirmPassword) {

            var deferredObject = $q.defer();

            $http.post(
                '/Account/Register', {
                    Email: emailAdress,
                    Password: password,
                    ConfirmPassword: confirmPassword
                }
                ).
            success(function (data) {
                if (data == "True") {
                    deferredObject.resolve({ success: true });
                } else {
                    deferredObject.resolve({ success: false });
                }
            }).
            error(function () {
                deferredObject.resolve({ success: false });
            });

            return deferredObject.promise;
        }
    }]);
    AAngScript.config('appConfig', ['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
        $routeProvider.
        when('/register', {
            templateUrl: 'Account/Register',
            controller: 'RegisterController'
        })
        .when('/login', {
            templateUrl: '/Account/Login.html',
            controller: 'LoginController'
        });

        $httpProvider.interceptors.push('AuthHttpResponseInterceptor');
    }]);
}());

There is always an error [$injector:modulerr] and I really don't know what to do. "Request" for Angular module located in partial view _Layout with those code:

<html ng-app="AAngScript">
<head></head>
<body>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/Scripts/AAngScript.js"></script>
....
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Thanks for helping me!

Answer 1

In your very last line The IIFE is not closed correctly. You have:

}());

Should be:

})();

As in:

(function ( /* IIFE enclosed code within this function*/) {

    ...
    ...  

})(/* IIFE invoke*/);

---

Also, you are injecting services into your configuration that are not supposed to be injected at all. You can use services within configuration functions without explicitly injecting them as you would in controllers and services, and simply putting them as function parameters.

In the interest of promoting better code and practices this is your code using a coding standard close to John Papa's Angular Style Guide :

(function () {

    // module definition
    var AAngScript = angular.module('AAngScript', ['ngRoute']);

    // Add controller to angular app
    angular.module('AAngScript').controller('LoginController', LoginController);

    // Inject dependencies to controller
    LoginController.$inject = ['$routeParams', '$location', 'LoginFactory'];

    // Define login controller
    function LoginController($routeParams, $location, LoginFactory){

        // vm as in view-model
        var vm = this;

        vm.loginForm = {
            emailAdress: '',
            password: '',
            rememberMe: false,
            returnUrl: $routeParams.returnUrl,
            loginFailure: false
        };

        vm.login = function () {
            var result = LoginFactory($scope.loginForm.emailAdress, $scope.loginForm.password, $scope.loginForm.rememberMe);
            result.then(function (result) {
                if (result.success) {
                    if ($scope.loginForm.returnUrl !== undefined) {
                        $location.path('/productcategory');
                    } else {
                        $location.path($scope.loginForm.returnUrl);
                    }
                } else {
                    $scope.loginForm.loginFailure = true;
                }
            });
        }
    }


    // Add controller to angular app
    angular.module('AAngScript').controller('RegisterController', RegisterController);

    // Inject dependencies to controller
    RegisterController.$inject = ['$location', 'RegistrationFactory'];

    // Define login controller
        $routeParams, $location, LoginFactory) {
        $scope.loginForm = {
            emailAdress: '',
            password: '',
            rememberMe: false,
            returnUrl: $routeParams.returnUrl,
            loginFailure: false
        };
        $scope.login = function () {
            var result = LoginFactory($scope.loginForm.emailAdress, $scope.loginForm.password, $scope.loginForm.rememberMe);
            result.then(function (result) {
                if (result.success) {
                    if ($scope.loginForm.returnUrl !== undefined) {
                        $location.path('/productcategory');
                    } else {
                        $location.path($scope.loginForm.returnUrl);
                    }
                } else {
                    $scope.loginForm.loginFailure = true;
                }
            });
        }
    }]);
    function RegisterController ($location, RegistrationFactory) {

        // vm as in view-model
        var vm = this;

        vm.registerForm = {
            emailAdress: '',
            password: '',
            confirmPassword: '',
            registrationFailure: false
        };

        vm.register = function () {
            var result = RegistrationFactory($scope.registerForm.emailAdress, $scope.registerForm.password, $scope.registerForm.confirmPassword);
            result.then(function (result) {
                if (result.success) {
                    $location.path('/routeOne');
                } else {
                    $scope.registerForm.registrationFailure = true;
                }
            });
        }
    }


    // Add factory to angular app
    angular.module('AAngScript').factory('AuthHttpResponseInterceptor', AuthHttpResponseInterceptor);

    // Inject dependencies to factory
    AuthHttpResponseInterceptor.$inject = ['$q', '$location'];

    // Define AuthHttpResponseInterceptor factory
    function AuthHttpResponseInterceptor($q, $location) {

        var factory = this;

        factory.response =  function (response) {
            if (response.status === 401) {
                console.log("Response 401");
            }
            return response || $q.when(response);
        }

        factory.responseError = function (rejection) {
            if (rejection.status === 401) {
                console.log("Response Error 401", rejection);
                $location.path('/login').search('retutnUrl', $location.path());
            }
            return $q.reject(rejection);
        }

        // The factory object must be returned. Failure to do so results in an injection error
        // from an undefined factory.
        return factory;
    };


    // Add factory to angular app
    angular.module('AAngScript').factory('LoginFactory', LoginFactory);

    // Inject dependencies to factory
    LoginFactory.$inject = ['$http', '$q'];

    // Define LoginFactory
    function LoginFactory($http, $q) {

        var factory = this;

        factory.login = function(emailAdress, password, rememberMe){

             var deferredObject = $q.defer();

            $http.post(
                    '/Account/Login', {
                    Email: emailAdress,
                    Password: password,
                    RememberMe: rememberMe
                }
            ).
            success(function (data) {
                if (data == "True") {
                    deferredObject.resolve({ success: true })
                } else {
                    deferredObject.resolve({ success: false })
                }
            }).
            error(function () {
                deferredObject.resolve({ success: false })
            });

            return deferredObject.promise;
        }

        // The factory object must be returned. Failure to do so results in an injection error
        // from an undefined factory.
        return factory;
    };


    // Add factory to angular app
    angular.module('AAngScript').factory('RegistrationFactory', RegistrationFactory);

    // Inject dependencies to factory
    RegistrationFactory.$inject = ['$http', '$q'];

    // Define RegistrationFactory
    function RegistrationFactory($http, $q) {

        var factory = this;

        factory.register = function(emailAdress, password, rememberMe){

            var deferredObject = $q.defer();

            $http.post(
                '/Account/Register', {
                    Email: emailAdress,
                    Password: password,
                    ConfirmPassword: confirmPassword
                }
                ).
            success(function (data) {
                if (data == "True") {
                    deferredObject.resolve({ success: true });
                } else {
                    deferredObject.resolve({ success: false });
                }
            }).
            error(function () {
                deferredObject.resolve({ success: false });
            });

            return deferredObject.promise;
        }

        // The factory object must be returned. Failure to do so results in an injection error
        // from an undefined factory.
        return factory;
    };


    // Add configuration to angular app
    angular.module('AAngScript').config(Routing);

    // define configuration
    function Routing($routeProvider, $httpProvider){

     $routeProvider.
        when('/register', {
            templateUrl: 'Account/Register',
            controller: 'RegisterController'
        })
        .when('/login', {
            templateUrl: '/Account/Login.html',
            controller: 'LoginController'
        });

        $httpProvider.interceptors.push('AuthHttpResponseInterceptor');
    }

})();