在 URL 中显示用户名

Question

我有一个页面 Angular + bootstrap 应用程序，用户可以在其中将用户名（无密码）输入到文本输入中，他们的用户信息将显示在屏幕上。

我希望这样当用户的信息显示在屏幕上时，URL 会相应地改变。

例如：在浏览器中直接输入 URL：localhost:3000/user1 应该会立即打开用户 1 的信息，而无需在我的应用程序主屏幕上的文本框中输入。

此外，当您加载应用程序主屏幕时，在文本输入和搜索中输入 user2，在用户信息加载到屏幕后，URL 应更改为 localhost:3000/user2自动。

您应该知道我的应用是单页应用，尚未引入 angular 路由。

我只想知道我应该采取什么方法。谢谢

Answer 1

您至少可以实施 2 种可能的解决方案：

解决方案 1.

创建两个api get 方法，一个是UserExist()，另一个是getUserDetails()。

输入用户名后，点击查找，如果 isUserExist() returns 为真，则使用 $location.path('/:userId') 重定向到用户详细信息页面，其中 ":userId"=new_user_name

如果没有，显示消息 "User does not exist"。

方案二（我会选择）

将你的主 url 设置为 localhost:3000/user?name=user1

基本上使用参数'name'。

单击“查找”并加载新用户详细信息后，您可以动态更新 'name' 参数，例如 $location.search('name', 'user2')

在你的 $routeProvider.when() 语句中设置 'reloadOnSearch: false'

    $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?

您将在屏幕上加载新的用户详细信息，并将 url 更新为

    localhost:3000/user?name=user2

在 URL 中显示用户名

Showing a username in the URL

routes

twitter-bootstrap

angularjs