$window resets my service

Question

I am creating an login page using Angular. After I process my login in the backend, I set the values in MyService from my LoginCtrl and then move to the next page using $window.location.href= 'main.jsp'; . But when I call the values which I set in LoginCtrl from HomeCtrl, the values are empty?

I know that Services are singletons and will maintain the same state throughout the app. But in this case, It jut resets. I think it is because of using $window.location.href. Please help me solve my problem.

This is my service ( MyService ):

app.service('MyService', function() {
    var user = {
        name: '',
        permissions: ''
    };

    this.getUser = function() {
        return user;
    }

    this.setUser = function(userr) {
        this.user = userr;
    }
});

This my LoginCtrl: ( I've just posted the http.post part)

$http({
                method: 'POST',
                url: 'login',
                data: JSON.stringify($scope.user),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).success(function(data) {
                if (!("failure" == data)) {
                    console.log(data);
                    var user = MyService.getUser();
                    user.name = data.name;
                    user.permissions = data.permissions;
                    console.log(user);
                    console.log(MyService.getUser());

                     $window.location.href = 'main.jsp';
                    // MyService.changeLocation('main.jsp', true);
                } else {
                    $scope.information = "Invalid username/password!"
                }
            }).error(function(data) {
                console.log(data);
            });

And this is my HomeCtrl:

app.controller('HomeCtrl', function($scope, $http,MyService) {

    console.log(MyService.getUser());
    var user = MyService.getUser();
    $scope.flashMessage="Hello " + user.name;
});

Here user.name is empty.

Answer 1

You are changing your web page. The angular application is not persisted across the website boundary; remove the alteration to the window.location.href.

In order to simulate page changing in Angular consider using the official router (shipped with Angular 1.4+), ngRoute or Angular UI Router. These solutions use the HTML History Api and fallback to hashbang URLs to emulate the sort of thing you're trying to achieve.

This ends up creating a single-page application, which is what Angular is designed for.

Answer 2

In LoginCtrl, while reaching the success callback, you are not setting the response value(data in your case) to user object in MyService service.

You are getting the user object from the Service by

var user = MyService.getUser();

But setting the values to that object will not set the user object in the Service.

You need to use MyService.getUser(user); to set values in your service and the same will be available in your HomeCtrl

    $http({
            method: 'POST',
            url: 'login',
            data: JSON.stringify($scope.user),
            headers: {
                'Content-Type': 'application/json'
            }
        }).success(function(data) {
            if (!("failure" == data)) {
                console.log(data);
                var user= {};
                user.name = data.name;
                user.permissions = data.permissions;
                MyService.getUser(user);  //set the values for user 
                var obj= MyService.getUser();   //get the values for user

                console.log(obj);   
               //should display user object 
               //with respective name and permissions should be available

                console.log(MyService.getUser());

                 $window.location.href = 'main.jsp';
                // MyService.changeLocation('main.jsp', true);
            } else {
                $scope.information = "Invalid username/password!"
            }
        }).error(function(data) {
            console.log(data);
        });

UPDATE:

The reason why your code doesnt seem to work is: you are using $window incorrectly to change the route. $window.location.href = 'main.html' is somehow changing the route outside angular's context and hence not running the HomeCtrl. To fix this, you need to do the following:

• First, define routes for your angular application (preferabbly using ui-router)

   app.config(function($stateProvider){
     $stateProvider
         .state('login',{
               url:'/', 
               templateUrl:'login.html',          
               controller:'LoginCtrl'
           })
           .state('main',{
               url:'/main',
               templateUrl:'main.html',
               controller:'HomeCtrl'
           })
            .state("otherwise", { url : '/'})
     })
  

• Use $location.url('/main'). Notice it is same as the url pattern we defined for state: main. Or better, you should use $state.go('home'); to redirect the user to desirable state

Here's a working plunkr

Hope this helps!