I'm currently working on a form that I need to submit using the ng-submit event through a custom Auth service.
This is a snippet of the login.html (partial template)
<div class='container'>
<form class='form-signin' role='form' ng-submit='login()'>
<h2 class='form-signin-heading'>dotAdmin login</h2>
<input type='email' class='form-control' placeholder='Email Address' ng-model='email' required autofocus>
<input type='password' class='form-control' placeholder='Password' ng-model='password' required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
Here is a snippet from services.js
/* Services */
var dotAdminServices = angular.module('dotAdminServices', []);
// I'm unsure if loading http and rootscope dependencies are unnecessary
dotAdminServices.factory('SessionService', [function () {
return {
isLogged: false,
userId: null,
name: null,
email: null,
password: null,
imageUrl: null,
coverUrl: null
};
}]);
dotAdminServices.factory('AuthService',['$http', 'SessionService', '$location',
function ($http, SessionService, $location) {
var login = function (email, pw) {
$http.post('http://54.187.31.161/api/v1/users/sign_in', {'email': email, 'password': pw}).
success(function (data) {
SessionService.isLogged = true,
SessionService.name = data.name,
SessionService.id = data.id,
SessionService.email = email,
SessionService.password = pw,
SessionService.coverUrl = data.coverUrl,
SessionService.imageUrl = data.imageUrl;
$location.url('/dashboard');
}
).
error(function(){
SessionService.isLogged = false,
SessionService.name = null,
SessionService.id = null,
SessionService.email = null,
SessionService.password = null,
SessionService.coverUrl = null,
SessionService.imageUrl = null;
}
);
};
var logout = function () {
$http.delete('http://54.187.31.161/api/v1/users/sign_out', {'email': email, 'password': pw}).
success(function () {
SessionService.isLogged = false,
SessionService.name = null,
SessionService.id = null,
SessionService.email = null,
SessionService.password = null,
SessionService.coverUrl = null,
SessionService.imageUrl = null;
});
};
}]);
and here is a snippet from the controller.js
/* Controllers */
var dotAdminControllers = angular.module('dotAdminControllers', []);
dotAdminControllers.
controller('loginCtrl', ['SessionService', 'AuthService', '$location', '$http', '$scope',
function($scope, $http, $location, SessionService, AuthService){
$scope.dummy = 'stringtest';
$scope.login = function () {
alert('function executed');
};
}
]);
One interesting issue I'm facing is that when I run a unit test to access scope variables, they all turn out to be undefined. I even tried defining a dummy variable in the $scope and using {{dummy}} in login.html for testing purposes, but it doesn't bind or show up on the page. Additionally, when I set a breakpoint in controller.js, all the ServiceSession variables seem to be in the local scope. This has left me quite bewildered. Could there be multiple variable scopes that the injector is collapsing into the local scope? I understand that the event handler may not fire because it's undefined when the page loads, but why is this happening?
Thank you in advance for any insights you may have and for taking the time to go through my lengthy post.