Javascript Yii2+；AngularJS PrettyURL允许工作_Javascript_Php_Angularjs_.htaccess

Javascript Yii2+；AngularJS PrettyURL允许工作

javascript php angularjs .htaccess

Javascript Yii2+；AngularJS PrettyURL允许工作,javascript,php,angularjs,.htaccess,Javascript,Php,Angularjs,.htaccess,我正在使用Yi2和AngularJS。我不得不打电话给不同的网页，如关于我们，联系我们等，但我的美丽的网址不能正常工作。我需要这样的漂亮URL： localhost/angularjsyii/frontend/web/site/#/login 当前Url不工作：localhost/angularjsyii/frontend/web/site#！/#%2登录 .htaccess php（） config/main.php 您应该在AngularJS中启用HTML5模式以禁用hashPrefix在您

我正在使用Yi2和AngularJS。我不得不打电话给不同的网页，如关于我们，联系我们等，但我的美丽的网址不能正常工作。我需要这样的漂亮URL：

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

当前Url不工作：

localhost/angularjsyii/frontend/web/site#！/#%2登录

.htaccess php（

） config/main.php

您应该在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'
        });
    }
]);

阅读AngularJS的文章：
相对链接
确保检查所有相关链接、图像、脚本等。您必须
在主html文件的头部指定url基（
），或者必须使用绝对url（从/开始）
因为相对URL将解析为绝对URL
使用文档的初始绝对url，通常是
与应用程序的根不同
在您的情况下，基本href应该是这样的


URL最终应该是这样的：localhost/angularjsyii/frontend/web/site/login
哪个更漂亮。
我必须将$locationProvider.html5Mode（true）放在哪个文件中；？修改了我的答案。直接将我带到本地主机/login，然后就可以了@Akkie您是否配置了base href？您的意思是这个Url:public$baseUrl='@web'；？
   <?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() ?>

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

;

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

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

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