如何在不先导航到 index.html 的情况下直接进入带有 ui-router 的状态 [英] How can I go directly to a state with ui-router without first navigating to index.html

问题描述

我有一个使用 ui-router 的 AngularJS 应用程序.一切正常，但我希望像这样访问用户注册确认屏幕:

I have an AngularJS application that is using ui-router. All is working okay but I would like to have a user registration confirmation screen accessed like this:

  http://localhost:2757/Auth/confirmation

在我目前的配置中，当我使用此链接打开浏览器页面时，它不会查找 index.html 并且不会进入/Auth/confirmation 状态.我明白为什么会发生这种情况，但我不知道如何解决这个问题.

In my present configuration when I open a browser page with this link it does not look for the index.html and does not go to the /Auth/confirmation state. I understand why this happens but I do not know how to solve the problem.

谁能给我一些建议，告诉我如何/如果我可以创建一个链接，直接让我进入/Auth/confirmation.

Can someone give me some advice on how / if I can make a link that will get me to the /Auth/confirmation directly.

我能想到的大概是这样的:

All I can think of is perhaps something like this:

  http://localhost:2757/index.html?load=AuthConfirm

然后以某种方式进行检查，以检测加载 index.html 后要转换到的新状态.

and then somehow have a check that detects a new state to transition to once the index.html is loaded up.

这是我的 AppConfig 文件:

Here is my AppConfig file:

var auth = {
    name: 'auth',
    url: '/Auth',
    views: {
        'root': {
            templateUrl: 'app/auth/partials/home.html'
        }

    }
};

var authContent = {
    name: 'auth.content',
    url: '/:content',
    views: {
        'root': {
            templateUrl: 'app/exams/partials/home.html'
        },
        'content': {
            templateUrl: function (stateParams) {
                return 'app/auth/partials/' + stateParams.content + '.html'
            }
        }
    }
}

这是我尝试过的:

http://localhost:2757/index.html <<带我到我的主索引页面

http://localhost:2757/index.html << takes me to my main index page

http://localhost:2757/index.html/Auth <<返回页面未找到

http://localhost:2757/index.html/Auth << returns page not found

http://localhost:2757/index.html/Auth/register <<返回页面未找到

http://localhost:2757/index.html/Auth/register << returns page not found

推荐答案

我想说我们这里需要的是——让index.html被加载——作为一个SPA(单页应用).然后我们将受益于 UI-Router 中内置的功能:

I would say that what we need here is - to let the index.html be laoded - as a SPA (Single page application). Then we will profit from the features built in in the UI-Router:

.when() 用于重定向

参数:

什么 字符串 |正则表达式 |UrlMatcher 要重定向的传入路径.
处理程序 字符串 |函数 要将用户重定向到的路径.

what String | RegExp | UrlMatcher The incoming path that you want to redirect.
handler String | Function The path you want to redirect your user to.

handler as String

handler as String

如果 handler 是一个字符串，它被视为一个重定向，并根据 match 的语法进行插值(即类似于 RegExp 的 String.replace()，否则类似于 UrlMatcher 模式).

If handler is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index   
    $urlRouterProvider.when('', '/index');

    // You can also use regex for the match parameter
    $urlRouterProvider.when(/aspx/i, '/index');
})

.otherwise() 无效路由

参数:

路径 字符串 |Function 要重定向到的 url 路径或返回 url 路径的函数规则.函数版本传递两个参数:$injector 和 $location.

path String | Function The url path you want to redirect to or a function rule that returns the url path. The function version is passed two params: $injector and $location.

app.config(function($urlRouterProvider){
    // if the path doesn't match any of the urls you configured
    // otherwise will take care of routing the user to the specified url
    $urlRouterProvider.otherwise('/index');

    // Example of using function rule as param
    $urlRouterProvider.otherwise(function($injector, $location){
        ... some advanced code...
    });
})

如何正确使用.when()(例如声明的顺序)请在此处查看(更多详情和例子)

• Angular UI-Router $urlRouterProvider .when not working *anymore*
• Angular UI-Router $urlRouterProvider .当我点击时不起作用

这篇关于如何在不先导航到 index.html 的情况下直接进入带有 ui-router 的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！