Angular Routing only works for one case

Question

So I'm trying to use angular routing for my project but it seems that only one route is working properly. I can access any of the routes if I used 'localhost/#/{{routeName}}' but everything except home returns a 404 error when I use the format 'localhost/{{routeName}}'. Here's my config

angular.module('shasta-water', ['search', 'ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);

      $routeProvider
        .when('/', {
          redirectTo: '/home'
        })
        .when('/home', {
          templateUrl: 'Templates/HomeTemplate.html'
        })
        .when('/search', {
          templateUrl: 'Templates/SearchTemplate.html',
          controller: 'searchCtrl'
        })
        .when('/add', {
          templateUrl: 'Templates/AddTemplate.html'
        })
        .otherwise({
          // templateUrl: 'Templates/ErrorTemplate.html'
          redirectTo: '/home'
        });

    }]);

@Ties Yeah, I can get to the files using localhost/#/search and localhost/#/add but they don't work if I just localhost/search or localhost/add — Desquid, Feb 25 '16 at 15:16
you need to add some code to your server it understands your requests. Don't know ASP.NET myself but found this: http://stephenwalther.com/archive/2015/01/16/asp-net-5-and-angularjs-part-3-adding-client-routing — Ties, Feb 25 '16 at 15:20

score 1 · Answer 1 · edited May 23 '17 at 12:23

You'll need to make sure the server also knows what do with these urls it receives requests for when you use HTML5 mode (without #) you can do this by:

Apache/PHP

Inside your .htaccess file in your root folder. Handle routes in index.php

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.php [NC,L]

From: https://stackoverflow.com/a/22740184/5171528

ASP.NET

 <!-- from https://stackoverflow.com/questions/25916851/wrapping-staticfilemiddleware-to-redirect-404-errors -->

<configuration>
<system.webServer>
  <modules runAllManagedModulesForAllRequests="true" />
  <rewrite>
    <rules>
      <!--Redirect selected traffic to index -->
      <rule name="Index Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

Angular Routing only works for one case

1 Answers1

Apache/PHP

ASP.NET