In Angular, how to redirect with $location.path as $http.post success callback

JavascriptModel View-ControllerAngularjs

Javascript Problem Overview


I am attempting to make a simple authentication service by sending a Post to a php file, I need it to load the home page partial on my ng-view when its successful.

This is what I tried :

function loginCtrl($scope, $http, $location){
    $http.post(url,data).success(function(data){
        $location.path('/home');
    });
}

Results in my url changing but ng-view not updating. It updates when I manually refresh the page.

(routes have been configured properly at the $routeProvider, I have tested redirecting this with a standalone function not as a callback and it works )

I have also tried defining $location.path('/home') as a function and then calling it on the callback it still doesn't work.

I did some research and found some articles stating this happens when using another third party plugin, I am only loading angular.js

Any insights or pointers to some study material will be great

Javascript Solutions


Solution 1 - Javascript

Here is the changeLocation example from this article http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#apply-digest-and-phase

//be sure to inject $scope and $location
var changeLocation = function(url, forceReload) {
  $scope = $scope || angular.element(document).scope();
  if(forceReload || $scope.$$phase) {
    window.location = url;
  }
  else {
    //only use this if you want to replace the history stack
    //$location.path(url).replace();

    //this this if you want to change the URL and add it to the history stack
    $location.path(url);
    $scope.$apply();
  }
};

Solution 2 - Javascript

There is simple answer in the official guide:

> What does it not do? > > It does not cause a full page reload when the browser URL is changed. > To reload the page after changing the URL, use the lower-level API, > $window.location.href.

Source: [https://docs.angularjs.org/guide/$location][1]

[1]: https://docs.angularjs.org/guide/$location "https://docs.angularjs.org/guide/$location"

Solution 3 - Javascript

I am doing the below for page redirection(from login to home page). I have to pass the user object also to the home page. so, i am using windows localstorage.

    $http({
		url:'/login/user',
		method : 'POST',
		headers: {
		    'Content-Type': 'application/json'
		  },
		data: userData
	}).success(function(loginDetails){
		$scope.updLoginDetails = loginDetails;
		if($scope.updLoginDetails.successful == true)
			{
				loginDetails.custId = $scope.updLoginDetails.customerDetails.cust_ID;
				loginDetails.userName = $scope.updLoginDetails.customerDetails.cust_NM;
				window.localStorage.setItem("loginDetails", JSON.stringify(loginDetails));
				$window.location='/login/homepage';
			}
		else
		alert('No access available.');
		
	}).error(function(err,status){
		alert('No access available.');		
	});

And it worked for me.

Solution 4 - Javascript

Instead of using success, I change it to then and it works.

here is the code:

lgrg.controller('login', function($scope, $window, $http) {
    $scope.loginUser = {};

    $scope.submitForm = function() {
	    $scope.errorInfo = null

	    $http({
		    method	: 'POST',
		    url		: '/login',
		    headers : {'Content-Type': 'application/json'}
		    data: $scope.loginUser
	    }).then(function(data) {
	    	if (!data.status) {
		    	$scope.errorInfo = data.info
		    } else {
		    	//page jump
		    	$window.location.href = '/admin';
		    }
	    });
    };
});

Solution 5 - Javascript

Use : $window.location.href = '/Home.html';

Solution 6 - Javascript

it's very easy code .. but hard to fined..

detailsApp.controller("SchoolCtrl", function ($scope, $location) { 
      $scope.addSchool = function () {
  
        location.href='/ManageSchool/TeacherProfile?ID=' + $scope.TeacherID;
      }
});
    

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGeorge Ananda EmanView Question on Stackoverflow
Solution 1 - JavascriptMark NadigView Answer on Stackoverflow
Solution 2 - Javascript0x6B6F77616C74View Answer on Stackoverflow
Solution 3 - Javascriptuser2230867View Answer on Stackoverflow
Solution 4 - JavascriptjcguoView Answer on Stackoverflow
Solution 5 - Javascriptuser2136053View Answer on Stackoverflow
Solution 6 - Javascriptisanka thalagalaView Answer on Stackoverflow