如何在不重新加载页面的情况下将浏览器地址栏中的 URL 更改为 angularJS

Question

I am new to angularJS, I'm working on a project. I'm calling an angular function on ng-click. the function is working fine but URL is not changing in the browser address bar while if I change the function in pure javascript and call the function. it changes the URL in the browser address bar without page reloading.

function pushAdd(page) {
    // alert("page");
    window.history.pushState("", "", "/account/" + page);
}

in angular function, I'm calling js function named pussAdd. when I use alert function within pushAdd() function it shows alert with page name. but the URL is not changing.

$scope.changeUrl = function (page) {
    /*my code which is working fine here*/
    pushAdd(page);
}

Answer 1

Use $location.path() to change URL in Angular way :

angular.directive(
    'fooBar',
    [
        '$location',
        ($location) =>
            {
                restrict: 'EA',
                link: (scope) =>
                    scope.changeUrl = (page) => $location.path("/account/" + page)
            }
    ]
);