AngularJS PushState的htaccess设置 [英] htaccess settings for angularJS pushstate

问题描述

我在AngularJS中使用pushstate，但是htaccess文件存在一些问题。
这是HTML5mode为false的URL：

I'm using pushstate with AngularJS but I'm having some issues with the htaccess file. This is the URL with HTML5mode false:

http://127.0.0.1/mpu/#!/Roma/home
（罗马是一个变量）

http://127.0.0.1/mpu/#!/Roma/home (Roma is a variable)

目前，我正在使用此代码：

At the moment I'm using this:

<ifModule mod_rewrite.c>
  Options +FollowSymLinks
  IndexIgnore */*
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule (.*) index.html
</ifModule>

结果，我得到了：
http://127.0.0.1/mpu/home

但是我需要它在mpu之后加上罗马

But instead I need it with "Roma" after mpu

有人可以帮我写正确的htaccess吗？

Can anyone help me to write the right htaccess please?

推荐答案

我建议您阅读这篇文章 https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

I suggest you to read this article https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

已更新

这是文件上的 .htaccess 文件我的根文件夹

This is the .htaccess file on my root folder

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

RewriteRule ^ index.html [L]

这是我的虚拟主机（我在Windows上使用Xampp）。

This is my virtual host ( I'm using Xampp on windows ).

转到 C：\xampp\apache\conf\extra 并编辑 httpd-vhosts.conf 文件，不要忘记在主机文件中也添加 127.0.0.1 example.local

Go to C:\xampp\apache\conf\extra and edit httpd-vhosts.conf file and don't forget to add also 127.0.0.1 example.local in you host file

<VirtualHost *:80>
    ServerName example.local
    DocumentRoot "C:\xampp\htdocs\YOUR_PROJECT_FOLDER"
    <Directory "C:\xampp\htdocs\YOUR_PROJECT_FOLDER">
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

重新启动Apache服务器，您就很好了。

Reboot the Apache server and you're good to go.

完成此设置后，这将是Angular中路由部分的代码

After this setup, this will be your code for the routing part in Angular

var Config = function($locationProvider, $stateProvider, $urlRouterProvider){

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

    $urlRouterProvider.otherwise('/');

    $locationProvider.html5Mode(true);

};

Config.$inject = [
    '$locationProvider',
    '$stateProvider',
    '$urlRouterProvider'
];

app.config(Config);

这篇关于AngularJS PushState的htaccess设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！