Angular将主视图呈现两次,而不是加载正确的模板

I'm having a problem with Angular templating - instead of including the correct template, the main view (view that initially gets loaded) is renderend twice. After spending the most of the last 2 days trying to solve this, I'm still getting nowhere.

More detailed description:

I'm using Angular to develop a single page application for managing a website's content. The rest of this website is built with Laravel. Angular is used only for the content management system which is a separate application that's protected by Laravel's HTTP filters and authentication system.

The problem occurs when the Angular app is not located at the root URL (for example, http://application.dev works, while http://application.dev/admin doesn't).

The main code (stripped down to essentials in an attempt to find the problem):

/*global angular*/
var App = angular.module('Dashboard', ['ui.router']);

App.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    'use strict';
    $locationProvider.html5Mode(true).hashPrefix('!');

    $stateProvider.state('statistics', {
        url: '/statistics',
        templateUrl: 'statistics/index.html'
    });

    $stateProvider.state('notifications', {
        url: '/notifications',
        templateUrl: 'notifications/index.html'
    });

    $urlRouterProvider.when('/', '/statistics');
});

The application view:

<!DOCTYPE html>
<html lang="en" ng-app="Dashboard">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <base href="/admin/">
    </head>
    <body>
        <div id="container" class="full">
            <header>
                <nav>
                    <ul>
                        <li><a ui-sref="statistics">Statistics</a></li>
                        <li><a ui-sref="notifications">Notifications</a></li>
                    </ul>
                </nav>
            </header>
            <div id="content" ui-view></div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
        <?php echo HTML::script(asset('javascripts/main.js')) ?>
    </body>
</html>

Sample template that doesn't get included for some reason:

<section id="statistics">
    <h3>Statistics</h3>
</section>

Laravel routing file:

Route::group(
    [
        'namespace' => 'Admin',
        'prefix' => 'admin'
    ],
    function () {
        Route::group(
            [
                'namespace' => 'Account'
            ],
            function () {
                Route::group(
                    [
                        'prefix' => 'login'
                    ],
                    function () {
                        Route::get('/', [
                            'as' => 'admin.login',
                            'uses' => 'LoginController@showLogin'
                        ]);

                        Route::post('/', [
                            'uses' => 'LoginController@attemptLogin'
                        ]);
                    }
                );

                Route::get('logout', [
                    'as' => 'admin.logout',
                    'uses' => 'LogoutController@attemptLogout'
                ]);
            }
        );

        Route::get('/', [
            'as' => 'admin.dashboard',
            'before' => 'auth',
            'uses' => 'DashboardController@start'
        ]);
    }
);

Every time I'm using the templateUrl option (template obviously works since no file is included), it doesn't include the correct template. Instead another request is fired to http://application.dev/admin URL and it essentially duplicates the whole view after receiving the 200 OK status code. I've tried to narrow the problem using Chrome's developer tools - the only unusual thing was that the requests initiator is the template (or URL) that should be included normally. Unfortunately that doesn't help much.

I'm a bit suspicious that the problem might be caused by Laravel's routing or URL rewriting, but I haven't been enable to verify it yet. Any ideas what could be the reason of this behaviour?

Edit:

Added the routes.php file in case it might be causing this problem.

douiwn6941
douiwn6941 没有.htaccess,因为我的虚拟主机的根文件夹是Laravel安装的公共目录。无论如何,我找到了这个问题的解决方案,并将很快发布。
大约 6 年之前 回复
donglu6303
donglu6303 发布你的htaccess:)
大约 6 年之前 回复
doukang8949
doukang8949 如果你有http://application.dev/admin#/statistics为url并且你的laravel路由中的某些内容出错了,那就无济于事了。但是也可以在不使用html5mode时删除基本标记
大约 6 年之前 回复
dtu72460
dtu72460 我已经尝试了没有html5Mode和正确的URL,但结果仍然是相同的。
大约 6 年之前 回复
dp19001
dp19001 ooops...我确实想念它。如果html5Mode为false,则需要在url中使用hash#
大约 6 年之前 回复
douzhuochao4027
douzhuochao4027 肯定有一个<base>标签。我猜你错过了它。此外,无论html5Mode值如何,它都不起作用。
大约 6 年之前 回复
dongshao1981
dongshao1981 听起来很像Laravel在尝试获取模板然后再次为您提供主URL时尝试检查您的权限或其他内容。我不知道Laravel是如何工作的。
大约 6 年之前 回复

1个回答



在花了太多时间之后,我终于找到了问题所在。 事实证明,当URL是多个部分深度时(就像我的情况一样),必须在 templateUrl </ code>值之前添加正斜杠。 在我的情况下,它必须是这样的: /javascripts/statistics/index.html </ code>。</ p>

似乎这么简单的解决方案,但它引起了我太多 头痛。 如果有人遇到类似的问题,我会张贴此内容。</ p>

此功能归功于此答案 。</ p>
</ div>

展开原文

原文

After spending too much time on this, I finally found out what the problem was. As it turns out, when URL is multiple sections deep (like in my situation), a forward slash has to be prepended to the templateUrl value. In my case it had to be something like this: /javascripts/statistics/index.html.

Seems such a simple solution, but it caused me too much headache. I'm posting this in case anyone encounters a similar problem.

The credit goes to this answer.

douzou0073
douzou0073 是的,我很确定。 那是我改变的唯一一件事。
接近 6 年之前 回复
doushe8577
doushe8577 这对我不起作用:(你确定这是什么修好了吗?
接近 6 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐