javascript - 如何在 apache 上实现 Angular 推送状态

Question

我遵循了 codelord.net" 实现推送状态的指示。并从 here 获得了 .htaccess 代码.

当我点击导航链接时，URL 看起来是正确的 (http://writers-tryst-test.ron-tornambe.com/about)，但主页显示的是空白页面，所有其他页面显示 404 NOT FOUND。

我是 Linux 新手，对 .htaccess 根文件的位置有点困惑。我在 GoDaddy 共享服务器上。我将代码附加到包含 public_html 的同一文件夹中的 .htaccess 文件中。

.htaccess 编辑 - 新文件

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
<IfModule mod_rewrite.c>
      RewriteEngine on
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule ^(.*)$ / [L,QSA]
</IfModule>

Angular JS

angular.module('wtApp').config(function($locationProvider) {
    $locationProvider.html5Mode(true);
});
var wtApp = angular.module('wtApp', ['ngRoute'])

wtApp.config(function ($routeProvider) {
    $routeProvider
    // route for the home page
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })
    // route for the writers page
    .when('/writers', {
        templateUrl: 'pages/writers.html',
        controller: 'writersController'
    })

... HTML

    <base href="/" />

我也试过在 href 前面加上正斜杠 (/)。

                <div class="collapse navbar-collapse" id="Writers-Tryst">
                    <ul class="nav navbar-nav">
                        <li class="active"><a id="homepage" href="/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
                        <li><a href="writers" class="glyphicon glyphicon-book"> Writers</a></li> 
                        <li><a href="enablers" id="enablers-link" class="glyphicon glyphicon-thumbs-up"> Enablers</a></li> 
                        <li><a href="about" class="glyphicon glyphicon-info-sign"> About</a></li> 
                        <li><a href="privacy" class="glyphicon glyphicon-info-sign"> Privacy/Rules</a></li> 
                        <li><a href="contact" class="glyphicon glyphicon-envelope"> Contact</a></li> 
                    </ul>

Answer 1

你的重写一团糟。得到这样奇怪的东西:http://writers-tryst-test.ron-tornambe.com/writers-tryst-test.ron-tornambe.com/#//

现在，我开发了自己的版本，最终在 Apache 配置中使用了一个目录:

<Directory "S:/localhost/Apache24/Angular/routing-simple-evo">
  RewriteEngine on

  # Don't rewrite files or directories
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Rewrite everything else to index.html to allow html5 state links
  RewriteRule ^ index.html [L]
</Directory>  

如果你愿意，我认为你可以将目录标签内的内容直接粘贴到你的 htaccess 中，但出于某种原因，配置文件似乎工作得最好，或者恰好是我最终整理这些东西时正在工作的。

我要指出的唯一其他事情是顺序和分组；您的路由命令看起来与我今天看到的所有教程都不一样。以下是对我有用的:

// create the module and name it RoutingEvo
// also include ngRoute for all our routing needs
var RoutingEvo = angular.module('RoutingEvo', ['ngRoute']);

// configure our routes
RoutingEvo.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'http://angular.dev/routing-simple-evo/views/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'http://angular.dev/routing-simple-evo/views/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'http://angular.dev/routing-simple-evo/views/contact.html',
            controller  : 'contactController'
        });
});

//从路由中记录一些信息:

RoutingEvo.run([
  '$rootScope',
  function($rootScope) {
    // see what's going on when the route tries to change
    $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
      // both newUrl and oldUrl are strings
      console.log('Starting to leave %s to go to %s', oldUrl, newUrl);
    });
  }
]);

// create the controller and inject Angular's $scope
RoutingEvo.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

RoutingEvo.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

RoutingEvo.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

我主要从以下方面将其组合在一起:

https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

-----老--------

将以下内容添加到应用程序根文件夹中的 .htaccess 文件(如果不存在，请创建一个 .htaccess 文件。

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ / [L,QSA]
</IfModule>