Routing using AngularJS [duplicate]

Question

I have the following HTML page:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="/">Main</a></p>

<a href="first">City 1</a>
<a href="#first">City 1a</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/first", {
        templateUrl : "first.html"
    })
    .when("/first", {
        templateUrl : "first.html"
    });
});
</script>

</body>
</html>

Then there is a simple first.html page. Now, my City1a link works and angularJS loads properly the page into <div ng-view></div>. Instead, city1 link does not work and I have a 404 error.

When one clicks on City1a my URL is http://localhost/myproject/index.html#/first. What can I do to turn the URL in http://localhost/myproject/first?

VahagnNikoghosian · Accepted Answer · 2016-06-23 12:16:59Z

0

module.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        //...your routes  
} ]}

This is forcing angular to use html5 history api, which allow you to manipulating browser history and its not using hashes for manipulating with location.

answered Jun 23, 2016 at 12:16

VahagnNikoghosian

6136 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

harry-potter Over a year ago

It does not work. I don't have the 404 error but the first.html page does not load.

VahagnNikoghosian Over a year ago

and which error was thrown ?

Collectives™ on Stack Overflow

Routing using AngularJS [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related