CODEWITHSUNDEEP
angularjsangular-routing
vtomic85
vtomic85

Reputation: 611

Angular routing doesn't work

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?

Upvotes: 0

Views: 677

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

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>

Upvotes: 2

Related Questions