Question

我遇到了Angular模板的问题 - 主视图（最初加载的视图）不是包含正确的模板，而是渲染两次。在过去2天的大部分时间里试图解决这个问题后，我仍然无处可去。

更详细的说明：

我正在使用Angular开发用于管理网站内容的单页应用程序。本网站的其余部分是使用Laravel构建的。 Angular仅用于内容管理系统，该系统是受Laravel的HTTP过滤器和身份验证系统保护的独立应用程序。

当Angular应用程序不在根URL时出现问题（例如，http://application.dev有效，而http://application.dev/admin则不然）。

主要代码（为了找到问题而被剥离到必需品）：

/*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');
});

应用程序视图：

<!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>

由于某种原因未包含的示例模板：

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

Laravel路由文件：

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'
        ]);
    }
);

每次我使用templateUrl选项（template显然有效，因为没有包含文件），它不包含正确的模板。而是向http://application.dev/admin URL触发了另一个请求，它在收到200 OK状态代码后基本上复制了整个视图。我试图使用Chrome的开发人员工具缩小问题范围 - 唯一不寻常的是请求发起人是应该正常包含的模板（或URL）。不幸的是，这没有多大帮助。

我有点怀疑这个问题可能是由Laravel的路由或URL重写引起的，但我还没有启用它来验证它。任何想法可能是这种行为的原因？

编辑：

添加了routes.php文件，以防它可能导致此问题。

Answer 1

在花了太多时间之后，我终于找到了问题所在。事实证明，当URL是多个部分深度时（就像我的情况一样），必须在templateUrl值之前加上正斜杠。就我而言，它必须是这样的：/javascripts/statistics/index.html。

似乎这么简单的解决方案，但它让我太头疼了。如果有人遇到类似的问题我会张贴这个。

信用额转到this answer。

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

1 个答案: