How to customize a page URL in Angular JS

Question

Is there any option to set the page URL dynamically in Angular JS. I know Angular JS popularly known as single page application,where we load the HTML page view and change the data inside the HTML by biding the values.

For example: Say I have a page www.mysite.com/#/myPage here I change the values inside myPage HTML file . i want to change the URL which is getting displayed in the browser based on the content in the page.

<div ng-app ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName"></input>
    <input type="submit" ng-click="login()" value="Login"></input>
    <div ng-repeat="login in logins">{{ login }}</div>
</div>

function LoginController($scope) {
    $scope.user = {
        firstName: "Foo",
        lastName: "Bar"
    };
    $scope.logins = [];
    $scope.login = function () {
        $scope.logins.push($scope.user.firstName + " was logged in.");
    };
}

Demo link.. https://jsfiddle.net/Lt7aP/4/

Now before I click on the login button, the URL might be like this www.mysite.com/#/myPage and after clicking on login the page URL has to change to something like this www.mysite.com/#/myPageLoggedIN.

Is there any way I can achieve this using angular JS routing or $location service.

You mean something like this: consolelog.io/angularjs-change-path-without-reloading? — axel.michel
– axel.michel, Commented Jan 27, 2017 at 10:54

PortePoisse · Accepted Answer · 2017-01-27 13:07:54Z

1

look at the angular tutorial.

https://docs.angularjs.org/tutorial/step_09

As @Jax said, you can configure the $routeProvider to achieve what you want.

EDIT

With ui router: https://github.com/angular-ui/ui-router/wiki/URL-routing

$stateProvider
.state('phone.detail', {
    url: "/phone/:marque",
    templateUrl: 'phone.detail.html',
    controller: function ($stateParams) {
        // If we got here from a url of /phone/Nokia
        expect($stateParams).toBe({marque: "Nokia"});
    }
})

To acceed from code

$state.go('phone.detail', {marque: "Nokia"});

edited Jan 27, 2017 at 13:07

answered Jan 27, 2017 at 10:57

PortePoisse

2192 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikhil Bharadwaj Over a year ago

I have been using $routeProvider for routing purpose, But could find any way to customize the URL of a page. My HTML page remains same and the content with in it changes based on user click. Say I have Phone website and have phone detail page, when user is in phone detail page, the URL will be www.phone.com/#phoneDetail, here I want to chnage the URL to www.phone.com/#Nokia, www.phone.com/#Samsung based on what the user has opened.

locropulenton · Accepted Answer · 2017-01-27 10:58:18Z

0

You could inject $window in a service or factory and try $window.history.pushState() and $window.history.replaceState() methods, which allow you to add and modify history entries, respectively.

// pseudo
angular
    .module('myServiceModule', [])
    .service(['$window', function ($window) {
        return {
             changeState: function (page, title, relativeRoute) {
                 $window.history.pushState(page, title, relativeRoute);
             };
        }
     }
}]);

answered Jan 27, 2017 at 10:58

locropulenton

4,8533 gold badges35 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to customize a page URL in Angular JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related