Showing a username in the URL

Question

I have a single page Angular + bootstrap app where the user can enter their username (no password) into a text input and their user info will be displayed on screen.

I wish to make it so that when a user's info is displayed on the screen, the URL changes accordingly.

Eg: Entering this URL should directly into the browser: localhost:3000/user1 should instantly open user1's info, without having to enter it into the textbox on my apps main screen.

Also, when you load the apps main screen, and enter user2 into the text input and search, after the users info is loaded into the screen, the URL should change to localhost:3000/user2 automatically.

You should know that my app is a single page app and does not already have angular routes introduced.

I just want to know what approach I should take. Thanks.

That's the question. What should I try? – donga Jun 11 '15 at 08:40 — donga, Jun 11 '15 at 08:40

score 2 · Accepted Answer · edited May 23 '17 at 12:01

There are at least 2 possible solutions you can implement:

Solution 1.

Create two api get methods, one isUserExist(), another getUserDetails().

As soon as you entered user name, click find, if isUserExist() returns true, redirect to user details page using $location.path('/:userId') where ":userId"=new_user_name

if not, show message "User does not exist".

Solution 2. (I would choose that)

Make your main url as localhost:3000/user?name=user1

Basically use param 'name'.

As soon as you clicked find and loaded new user details, you can dynamically update 'name' param like $location.search('name', 'user2')

set 'reloadOnSearch: false' in your $routeProvider.when() statement

    $routeProvider.when('/user', {
        templateUrl: 'some_user_template.html',
        controller: SomeUserCtrl,
        reloadOnSearch: false
    })

How can I set a query parameter in AngularJS without doing a route?

You will get new user details loaded on the screen with updated url as

    localhost:3000/user?name=user2

Thanks a lot! really appreciate answering this instead of down voting it to oblivion. — donga, Jun 11 '15 at 09:58

Showing a username in the URL

1 Answers1