AngularJS routing routes to path instead of loading the html page

Question

I am just making a basic AngularJS app from angular-seed which currently has:

index.html
app.js
home/home.html
home/home.js

Now, I want to redirect to home.html when I click on an li item Home with href="/home". This does okay, but it redirects me to directory structure instead of the file.
The files -
app.js

'use strict';
// Declare app level module which depends on views, and components
angular
    .module('mentorSpot', [
      'ngRoute',
      'mentorSpot.home'
    ])
    .config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
      $routeProvider.when('/home', {
        templateUrl: 'home/home.html',
        controller: 'HomeCtrl'
    });
      $routeProvider.otherwise({redirectTo: '/home'});
    }]);

home/home.js

'use strict';
angular.module('mentorSpot.home', ['ngRoute'])
.config(['$routeProvider'], function($routeProvider){
        $routeProvider.when('/home', {
            templateUrl: 'home/home.html',
            controller: 'HomeCtrl'
        });
    })
.controller('HomeCtrl',[function(){

}]);

home/home.html

<h1>This is the home page</h1>

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="mentorSpot" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MentorSpot</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
  <!-- W3.CSS Framework-->
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <!-- jQuery and external JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="hp.js"></script>
    <script src="https://use.fontawesome.com/d18274d1d9.js"></script>
    <style>
      body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
      .w3-navbar,h1,button {font-family: "Montserrat", sans-serif}
      .fa-anchor,.f
  </style>
</head>
<body>
  <!-- Navbar -->
  <ul class="w3-navbar w3-blue w3-card-2 w3-top w3-left-align w3-large">
    <li class="w3-quarter w3-center"><h3>MentorSpot.com</h3></li>
    <li class="w3-hide-small"><a href="#/home" class="w3-padding-large w3-hover-indigo">Home</a></li>
    <li class="w3-hide-small"><a href="#htutw" class="w3-padding-large w3-hover-indigo">How to use this website?</a></li>
    <li class="w3-hide-small"><a href="#Catalog" class="w3-padding-large w3-hover-indigo">Courses</a></li>
    <li class="w3-hide-small"><a href="#RegLog" class="w3-padding-large w3-hover-indigo">Register/Login</a></li>
  </ul>
  <div ng-view>

  </div>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="/home/home.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

Your anchor's href should be href="#/home", also don't put html & body tag in partial view — Pankaj Parkar
– Pankaj Parkar, Commented Apr 15, 2017 at 21:19
@PankajParkar I tried all of it, nothing worked. I'll edit the changes made in a second. — Nishit Mengar
– Nishit Mengar, Commented Apr 15, 2017 at 21:23
this is happening on your node server, not angular. can you post an example of what the routing file on the server looks like? — Claies
– Claies, Commented Apr 15, 2017 at 22:07
@Claies I'm quite a beginner, could you tell me where to find the routing file you are asking for so I can add it here? and also, I'm simply using npm start command to create and run the server. — Nishit Mengar
– Nishit Mengar, Commented Apr 15, 2017 at 22:22

Alex Pollan · Accepted Answer · 2017-04-15 22:41:47Z

1

I think this line is wrong and thereby your router is not being configured:

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

It should be:

.config(['$routeProvider', function($routeProvider){

I hope it's the issue

BTW, you should define the routes just once. In the example you are setting the home route twice.

edited Apr 15, 2017 at 22:41

answered Apr 15, 2017 at 22:35

Alex Pollan

8735 silver badges13 bronze badges

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

1 Comment

Claies Over a year ago

add to this, in angular 1.6, the href should be "#!/home"`. plnkr.co/edit/AzqS5EyVcA9INEAjIrgA?p=preview

Collectives™ on Stack Overflow

AngularJS routing routes to path instead of loading the html page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related