Angular routing doesn't work

Question

Disclaimer: Yes, I have read many other posts, but haven't been able to find the solution.

So, I have set up a basic Angular app:

index.html

<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="js/angular.js"></script>
        <script src="js/angular-route.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div class="navbar">
            <a href="#/">Home</a>
            <a href="#/aboutme">About me</a>
            <a href="#/projects">Projects</a>
            <a href="#/contact">Contact</a>
        </div>
        <div ng-view></div>
    </body>
</html>

app.js

var myApp = angular.module('sampleApp', ['ngRoute']);    
myApp.config(
    function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'views/main.html'
        }).
        when('/aboutme', {
            templateUrl: 'views/aboutme.html'
        }).
        when('/projects', {
            templateUrl: 'views/projects.html'
        }).
        when('/contact', {
            templateUrl: 'views/contact.html'
        }).
        otherwise({
            redirectTo: '/'
        });
    }
);

When I start the server (npm install http-server followed by http-server -o) and run the app, I can see the main.html content and the navigation links. The URL is http://127.0.0.1:8080/#!/. When I click e.g. Projects, the URL becomes http://127.0.0.1:8080/#!/#%2Fprojects, but the page content is still the same (navigation links + main.html's content).

I have also tried modifying app.js like this:

...
myApp.config(['$routeProvider',
    function($routeProvider) {
    ...
}]);

...but the outcome is the same.

What am I doing wrong?

In your index.html put in your head <base href="/"> to avoid the /#! and get the direct url — ocespedes
– ocespedes, Commented Jan 31, 2017 at 14:58
have you tried removing the / as in <a href="#projects">Projects</a> — Jax
– Jax, Commented Jan 31, 2017 at 14:59
it seems to working file i create a plnkr plnkr.co/edit/6UN0H4WVVM90Xzg1zpxc?p=preview — Sachila Ranawaka
– Sachila Ranawaka, Commented Jan 31, 2017 at 15:19

driconmax · Accepted Answer · 2017-01-31 15:44:30Z

2

it seems to be working fine. And as mention in the comments need to check the angular version. i create a sample Plunker

<script data-require="[email protected]" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script data-require="[email protected]" data-semver="1.2.0-rc1" src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>

edited Jan 31, 2017 at 15:44

driconmax

9421 gold badge19 silver badges32 bronze badges

answered Jan 31, 2017 at 15:30

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Collectives™ on Stack Overflow

Angular routing doesn't work

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related