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