个人中心
gpt4 book ai didi

javascript - Yii2 + AngularJS PrettyURL 启用工作

转载 作者：搜寻专家 更新时间：2023-10-31 21:23:04 24 4
gpt4 key购买 nike

我正在使用 Yii2 和 AngularJS。我必须调用不同的页面，例如关于我们、联系我们等。但是我的 Pretty URL 无法正常工作。我需要这样的 PrettyUrl:

localhost/angularjsyii/frontend/web/site/#/login

当前网址无效:localhost/angularjsyii/frontend/web/site#!/#%2Flogin

.htaccess

RewriteEngine on
# If a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Otherwise forward it to index.php
RewriteRule . index.php

main.php( <navbar> )

   <?php
use frontend\assets\AppAsset;

/* @var $this \yii\web\View */

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" ng-app="app">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Angular Yii Application</title>
<?php $this->head() ?>

<script>paceOptions = {ajax: {trackMethods: ['GET', 'POST']}};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/red/pace-theme-minimal.css" rel="stylesheet" />
<a base href="/angularjsyii/frontend/web/"></a>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
    <nav class="navbar-inverse navbar-fixed-top navbar" role="navigation" bs-navbar>
        <div class="container">
            <div class="navbar-header">
                <button ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" type="button" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span></button>
                <a class="navbar-brand" href="/angularjsyii/frontend/web/site/index">My Company</a>
            </div>
            <div ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true" class="collapse navbar-collapse" >
                <ul class="navbar-nav navbar-right nav">
                    <li data-match-route="/">
                        <a href="/">Home</a>
                    </li>
                    <li data-match-route="/about">
                        <a href="/about">About</a>
                    </li>
                    <li data-match-route="/contact">
                        <a href="/contact">Contact</a>
                    </li>
                    <li data-match-route="/login">
                        <a href="/login">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div ng-view>
        </div>
    </div>

</div>

<footer class="footer">
    <div class="container">

        <p class="pull-right"><?= Yii::powered() ?> <?= Yii::getVersion() ?></p>
    </div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

app.js(用于路由)

    'use strict';

    var app = angular.module('app', [
        'ngRoute',      //$routeProvider
        'mgcrea.ngStrap'//bs-navbar, data-match-route directives
    ]);

    app.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/', {
                    templateUrl: 'partials/index.html'
                }).
                when('/about', {
                    templateUrl: 'partials/about.html'
                }).
                when('/contact', {
                    templateUrl: 'partials/contact.html'
                }).
                when('/login', {
                    templateUrl: 'partials/login.html'
                }).
                otherwise({
                    templateUrl: 'partials/404.html'
                });
        }
    ])

;

配置/main.php

'urlManager' => [
    'class' => 'yii\web\UrlManager',
    // Disable index.php
    'showScriptName' => false,
    // Disable r= routes
    'enablePrettyUrl' => true,
],

最佳答案

您应该在 AngularJS 中启用 HTML5 模式以禁用 hashPrefix !在你的路线上。

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.
        when('/', {
            templateUrl: 'partials/index.html'
        }).
        when('/about', {
            templateUrl: 'partials/about.html'
        }).
        when('/contact', {
            templateUrl: 'partials/contact.html'
        }).
        when('/login', {
            templateUrl: 'partials/login.html'
        }).
        otherwise({
            templateUrl: 'partials/404.html'
        });
    }
]);

来自阅读$location documentation AngularJS 的:

Relative links

Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file (<base href="/my-base">) or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.

在你的情况下，基本 href 应该是这样的 <a base href="/angularjsyii/frontend/web/site"> .现在你不需要 #在你的网址上了。更改您的路线，例如:

<li data-match-route="/login">
    <a href="/login">Login</a>
</li>

URL 最终应如下所示:localhost/angularjsyii/frontend/web/site/login哪个更漂亮。

关于javascript - Yii2 + AngularJS PrettyURL 启用工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42222156/

24 4 0
文章推荐： PHPUnit_Framework_MockObject_Matcher_AnyInvokedCount any，什么时候用？
文章推荐： php - 我的模型中 Slim 3 的可捕获 fatal error ，必须实现接口(interface) Interop\Container\ContainerInterface
文章推荐： php - Slim 框架上 CORS 期间的预检授权 header
文章推荐： 尽管有 php.ini 设置，PHP 不记录脚本错误
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com