CODEWITHSUNDEEP
angularjsvisual-studio-2012
Rex_C
Rex_C

Reputation: 2477

Cannot manually navigate to urls

Whenever I manually enter a url into my browser to a site built with Angular, I get:

'HTTP 404
 The resource cannot be found
 Requested URL: /register'

The only navigable url is http://localhost:XXXX/index.html, from there I have to navigate around the site with anchor tags.

My config file for Angular looks like this:

app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
//.hashPrefix('!')
$routeProvider
    .when('/', {
        templateUrl: '/Client/AngularViews/home.html'
    })
    .when('/register', {
        templateUrl: '/Client/AngularViews/register.html',
        controller: 'registerController'
    })
    .when('/post-register', {
        templateUrl: '/Client/AngularViews/postRegister.html',
        controller: 'registerController'
    })
    .otherwise({ templateUrl: 'Client/AngularViews/home.html' });
});

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
    <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/mainController.js"></script>
    <base href="/" />
</head>
<body>
    <div class="container-fluid">
        <div ng-view></div>
    </div>

Can someone explain to me what I'm doing wrong? I want to be able to manually enter urls into the address bar and navigate to anything other than index.html

Upvotes: 0

Views: 730

Answers (2)

Adriaan Davel
Adriaan Davel

Reputation: 748

I use ASP.Net MVC for server side URL rewriting using controllers. Probably not its intended use but works well

Upvotes: 1

Valentyn Shybanov
Valentyn Shybanov

Reputation: 19391

According to documentation:

Server side Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handeled by the application.

https://docs.angularjs.org/guide/$location

So you need some additional support from server-side: configure your http server to reply with index.html for all url you have in your apps.

Upvotes: 1

Related Questions