In the process of developing an Angular application, I have incorporated three potential initial views for users who are not currently logged in:
intro.html: Allows the user to choose between 'Sign In' or 'Register'register.html: Form for new user registrationlogin.html: Form for existing user login
At the moment, I have a single service called auth.service.js which connects to Firebase:
angular
.module('app')
.factory('authService', authService);
authService.$inject = ['$firebaseAuth'];
function authService($firebaseAuth) {
var ref = new Firebase('https://[MY-FIREBASE].firebaseio.com');
return $firebaseAuth(ref);
}
Additionally, I have a controller named login.controller.js that relies on authService to manage user accounts creation, user logins, Facebook connectivity, and more. Here is a snippet from that controller:
angular
.module('app')
.controller('RegisterController', RegisterController);
RegisterController.$inject = ['authService','$location'];
function RegisterController(authService,$location) {
var vm = this;
vm.createUser = function() {
vm.mismatch = false;
if (vm.password === vm.confirm) {
authService.$createUser({
email: vm.email,
password: vm.password
}).then(function(userData) {
$location.path('/people');
}).catch(function(error) {
alert(error);
});
} else {
vm.mismatch = true;
vm.mismatchMessage = 'Password and confirmation must match';
}
};
// Login with Facebook
vm.connectFacebook = function() {
authService.$authWithOAuthPopup("facebook").then(function(authData) {
$location.path('/places');
}).catch(function(error) {
alert("Authentication failed:", error);
});
};
...
}
I am using this same controller across my 'intro/register/login' views, but I feel like there might be a better approach. Would it be more efficient to transfer the logic such as createUser, connectFacebook, and similar functions into my auth.service.js file, and then create separate 'skinnier' controllers for each view that rely on authService? This way, the separation of concerns could be clearer.