在Angular中使用UI-Router禁用URL更改？

Is it possible to configure ui-router in an Angular 1.5 application to completely ignore the address bar?

是否可以在Angular 1.5应用程序中配置ui-router以完全忽略地址栏?

Desired behaviour is something like this:

期望的行为是这样的:

• Navigating between states via UI does not change the URL

通过UI在状态之间导航不会更改URL

• Changing the URL does not cause navigation between states, only UI or programmatic actions do (clicking the buttons, etc.)

更改URL不会导致状态之间的导航,只会导致UI或编程操作(单击按钮等)

• Hitting F5 restarts the application from "default" controller

点击F5从“默认”控制器重启应用程序

• Original URL (especially query parameters) must still be accessible

原始URL(尤其是查询参数)仍必须可访问

UPDATE: I am creating an application with a very specific use case, not a website. Ordinary web browsing practices do not apply here. Please accept the requirements as they are, even if it may seem to contradict common sense.

更新:我正在创建一个具有非常特定用例的应用程序,而不是一个网站。普通的网页浏览实践不适用于此处。即使它看起来与常识相矛盾,也请接受它们的要求。

1 个解决方案

#1

Agreed that the stated approach is not good if we consider classic web app.

同意如果我们考虑经典的网络应用程序,所述方法并不好。

I tried to create a sample application with your requirement in mind. Here is how my router configuration(router.config.js) file looks like in my fruits app:

我试着创建一个满足您需求的示例应用程序。以下是我的水果应用程序中的路由器配置(router.config.js)文件的样子:

.state('start', {
            url: '/',
            templateUrl: '../app/start/start.html',
            controller: 'startCtrl as vm',                
        })
.state('fruits', {              
            templateUrl: '../app/fruits/fruitshtml',
            controller: 'fruitsCtrl as vm',              
        })
.state('fruits.details', {
       params: {
                   fruitId: undefined
               },
               templateUrl: '../app/fruits/fruitdetails.html',
               controller: 'fruitDetailsCtrl as vm'
        })

Explanation of States:

国家解释:

start: url / is entry point of my application. If url is /, start state will be loaded.

start:url /是我的应用程序的入口点。如果url为/,则将加载启动状态。

fruits: This state shows list of fruits in my app. Note that there is no url defined for this state. So, if we go to this state, url won't change (State will change, but url won't).

水果:此状态显示我的应用程序中的水果列表。请注意,此状态没有定义url。因此,如果我们进入此状态,url将不会更改(状态将更改,但url将不会更改)。

fruits.details: This state should show detail of a fruit with id fruitId. Notice we have passed fruitId in params. params is used to pass parameters without using the url! So, passing of parameters is sorted. I can write ui-sref="fruit.details({ fruitId: my-fruit-id })" to navigate to fruit.details state and show details of my fruit with fruitId my-fruit-id.

fruits.details:此状态应显示具有id fruitId的水果的详细信息。请注意,我们已经通过了paraI中的fruitId。 params用于传递参数而不使用url!因此,对参数的传递进行了排序。我可以写ui-sref =“fruit.details({fruitId:my-fruit-id})”来导航到fruit.details状态并用fruitId my-fruit-id显示我的水果的详细信息。

As you might have already got it, the main idea is to use states as means of navigation.

正如您可能已经掌握的那样,主要思想是使用状态作为导航手段。

---

Does my app pass your points?

我的应用程序是否超过您的积分

1. Navigating between states via UI does not change the URL

通过UI在状态之间导航不会更改URL

2. Changing the URL does not cause navigation between states, only UI or programmatic actions do (clicking the buttons, etc.)

更改URL不会导致状态之间的导航,只会导致UI或编程操作(单击按钮等)

3. Hitting F5 restarts the application from "default" controller

点击F5从“默认”控制器重启应用程序

4. Original URL (especially query parameters) must still be accessible

原始URL(尤其是查询参数)仍必须可访问

->

1. pass: as we haven't defined url for states

pass:因为我们没有为状态定义url

2. pass: changing url will change to state to start. The app will not take user to any different state, but it does changes state to start or we could say our default state.

传递:更改网址将更改为启动状态。该应用程序不会将用户带到任何不同的状态,但它会更改状态以启动或我们可以说我们的默认状态。

3. pass: refresh will take you to start state

传递:刷新会带你开始状态

4. pass: if you write start in your url, you app will got start state.

传递:如果你在你的网址中写下开头,你的应用程序将获得开始状态。

Possible work around for the 2nd point, which is not passed completely: We can write code to check the url (in startCtrl controller) passed. If url contains extra things appended to /start, go to previous state. If url is 'start' continue loading start page.

Update: As pointed by OP @Impworks, solution for 2nd point is also passed if we set url of our start state to /. This way, if we append any string to url, the state won't change.

更新:如OP @Impworks所指出的,如果我们将启动状态的url设置为/,则也会传递第二点的解决方案。这样,如果我们将任何字符串附加到url,状态将不会更改。