Cannot get routing to work with AngularJS

Question

I'm creating a web portfolio and the main page has a menu. When the user clicks 'video' I want the site to go to mywebsite.com/video and go to video.html. I'm using AngularJS and I can't figure out what I'm doing wrong.

index.html

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
    <a href="#portfolio">Portfolio</a>
    <a href="#events">Upcoming Events</a>
    <a href="#cv">CV</a>
    <a href="#video">Video Reel</a>
</nav>
<div class="ng-view"></div>
</body>

main.js

var app = angular.module('myApp', ["ngRoute"]);

app.config(function($routeProvider) {

$routeProvider
    .when(
    '/', {
        redirectTo: '/home'
    })
    .when('/portfolio', {
        templateUrl: 'templates/portfolio.html'
    })
    .when('/events', {
        templateUrl: 'templates/events.html'
    })
    .when('/cv', {
        templateUrl: 'templates/cv.html'
    })
    .when('/video', {
        templateUrl: 'templates/video.html'
    })
    .otherwise({ redirectTo: '/' });
});

Kat · Accepted Answer · 2017-06-13 22:04:47Z

1

can you try to add $locationProvider service into config and change href attributes

//html
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
    <a href="#/portfolio">Portfolio</a>
    <a href="#/events">Upcoming Events</a>
    <a href="#/cv">CV</a>
    <a href="#/video">Video Reel</a>
</nav>
<div class="ng-view"></div>
</body>

//js
app.config(['$routeProvider','$locationProvider',
  function($routeProvider,$locationProvider) {

$routeProvider
    .when(
    '/', {
        redirectTo: '/'
    })
    .when('/portfolio', {
        templateUrl: 'templates/portfolio.html'
    })
    .when('/events', {
        templateUrl: 'templates/events.html'
    })
    .when('/cv', {
        templateUrl: 'templates/cv.html'
    })
    .when('/video', {
        templateUrl: 'templates/video.html'
    })
    // removed other routes ... *snip
    .otherwise({
        redirectTo: '/'
    }
);

// enable html5Mode for pushstate ('#'-less URLs)
//$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('!');
}]);

edited Jun 13, 2017 at 22:04

Kat

4841 gold badge6 silver badges22 bronze badges

answered Jun 13, 2017 at 16:52

hasan

3,5121 gold badge18 silver badges23 bronze badges

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

4 Comments

Kat Over a year ago

don't get the error, but clicking 'Video Reel' also doesn't work, the url changes, but the page stays the same

hasan Over a year ago

do you have video.html?

Kat Over a year ago

my urls are messed up as well, when I click on "Video Reel" i get localhost:8000/#!/#video

hasan Over a year ago

Let us continue this discussion in chat.

Sajeetharan · Accepted Answer · 2017-06-13 16:35:52Z

1

It should be,

 <a href="#/portfolio">Portfolio</a>
 <a href="#/events">Upcoming Events</a>
 <a href="#/cv">CV</a>
 <a href="#/video">Video Reel</a>

DEMO

edited Jun 13, 2017 at 16:35

answered Jun 13, 2017 at 16:30

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

7 Comments

Sajeetharan Over a year ago

@PankajParkar where?

Kat Over a year ago

I tried that and it still isn't working. I'm also getting: angular.js:38 Uncaught Error: [$injector:modulerr]

Sajeetharan Over a year ago

@Kat Then check your dependencies are properly injected, check the demo

Kat Over a year ago

commented out $locationProvider as that was causing the errors, but clicking the 'video' link still does nothing

Sajeetharan Over a year ago

@Kat did you check the attached demo

|

Helia · Accepted Answer · 2017-06-13 16:37:12Z

1

I think you should inject $locationProvider because you are using it but I do not see the injection.

answered Jun 13, 2017 at 16:37

Helia

671 silver badge12 bronze badges

1 Comment

Kat Over a year ago

thank you, i commented out $locationProvider for now

Collectives™ on Stack Overflow

Cannot get routing to work with AngularJS

3 Answers 3

4 Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related