AngularJS错误[$ injector：modulerr]

Question

抱歉，需要编写大量代码，但是我按照这些课程创建的AngularJS模块遇到了问题。 我希望我的角度模块可以与ASP.NET MVC一起使用，但是我什至无法运行它。

(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');
    }]);
}());

总是存在错误[$injector:modulerr] ，我真的不知道该怎么办。 使用以下代码对位于部分视图_Layout Angular模块的“请求”：

<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>

感谢您的帮助！

Answer 1

在最后一行中， IIFE没有正确关闭。 你有：

}());

应该：

})();

如：

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

    ...
    ...  

})(/* IIFE invoke*/);

---

此外，您正在将服务注入到您的配置中，而这些服务根本不应该被注入。 您可以在配置函数中使用服务，而无需像在控制器和服务中那样显式注入服务，而只需将它们作为函数参数即可。

为了促进更好的代码和实践，这是使用接近于John Papa的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');
    }

})();