I have been tasked with developing an application using angularjs. The application consists of a login page and home page.
The layout is divided into two sections - header and container, each controlled by headerCtrl and loginCtrl respectively.
The header remains constant throughout both sections, only the content changes after logging in.
This is the loginCtrl code:
angular.module('app').controller('LoginCtrl', ['$scope', 'LoginService',
function($scope, LoginService) {
$scope.title = "Login";
$scope.login = function() {
var user = {
username: $scope.username,
password: $scope.password
};
LoginService(user);
};
}
]);
This is the loginService code:
angular.module('app')
.factory('LoginService', function($http, $location, $rootScope) {
return function(user) {
$http.post('/login',{
username: user.username,
password: user.password
}).then(function(response) {
if (response.data.success) {
console.log(response.data);
$rootScope.user = response.data.user;
$location.url('/');
} else {
console.log(response.data.errorMessage);
$location.url('/');
}
});
};
});
This is the header.html template:
<div ng-controller="headerCtrl" class="container-fulid">
<div class="row custom-row1">
<div><span class="title_top pull-right">{{ user }}</span></div>
</div>
</div>
I need guidance on how to implement headerCtrl and modify the login controller and service to access user details (username) in the header.html file.