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

Question

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

期望的行为是这样的:

• 通过 UI 在状态之间导航不会更改 URL
• 更改 URL 不会导致状态之间的导航，只有 UI 或编程操作(单击按钮等)才会导致导航
• 按 F5 将从“默认” Controller 重新启动应用程序
• 原始网址(尤其是查询参数)必须仍然可访问

更新:我正在创建一个具有非常具体用例的应用程序，而不是网站。普通的网页浏览习惯在这里不适用。请按原样接受这些要求，即使它可能看起来与常识相矛盾。

Answer 1

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

我尝试根据您的要求创建一个示例应用程序。这是我的路由器配置(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'
        })

状态说明:

开始:url/是我的应用程序的入口点。如果 url 为/，将加载 start 状态。

水果:此状态显示我的应用程序中的水果列表。请注意，没有为此状态定义 url。因此，如果我们进入这种状态，url 不会改变(State willchange, but url won't)。

fruits.details:此状态应显示 id 为 fruitId 的水果的详细信息。请注意，我们已在 params 中传递了fruitId。 params用于传递参数，不使用url!所以，参数的传递是排序的。我可以编写 ui-sref="fruit.details({fruitId: my-fruit-id })" 导航到fruit.details状态并使用fruitId my-fruit-id显示我的水果的详细信息.

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

<小时/>

我的应用是否通过了您的积分？

1. 通过 UI 在状态之间导航不会更改 URL
2. 更改 URL 不会导致状态之间的导航，只有 UI 或编程操作(单击按钮等)才会导致导航
3. 按 F5 将从“默认” Controller 重新启动应用程序
4. 原始网址(尤其是查询参数)必须仍然可访问

->

1. 通过:因为我们还没有为州定义 url
2. pass:更改 url 将更改为 start 状态。该应用不会将用户带到任何不同的状态，但它会将状态更改为start，或者我们可以说我们的默认状态。
3. pass:刷新将带您进入开始状态
4. pass:如果您在网址中写入 start，您的应用将获得启动状态。

<删除>对于没有完全通过的第二点，可能的解决方法是:我们可以编写代码来检查传递的 url(在 startCtrl Controller 中)。如果 url 包含附加到/start 的额外内容，则转到之前的状态。如果 url 是“start”，则继续加载起始页。

更新:正如OP@Impworks所指出的，如果我们将开始状态的url设置为/，那么第二点的解决方案也会通过。这样，如果我们将任何字符串附加到 url，状态就不会改变。