Q:

angularjs routing issue - appends index.html

I have simple angularjs application and I believe I did not configure the routing the right way because in the browser the url looks weird. For example when I access my index.html page this is the url: http://localhost:8082/basic-web-app/app/index.html#/ and when I navigate to another pages within the app it appends the location after index.html#/: http://localhost:8082/basic-web-app/app/index.html#/login Every example I checked was without index.html and appending the location like http://localhost:8082/basic-web-app/app/ and http://localhost:8082/basic-web-app/app/login My routing:
    coursesApp.config(function($routeProvider, $httpProvider) {
    $routeProvider

    // route for the home page
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController',
        controllerAs: 'controller'
    })

    // route for the courses page
    .when('/courses', {
        templateUrl: 'pages/courses.html',
        controller: 'coursesController'
    })

    // route for the courses page
    .when('/login', {
        templateUrl: 'pages/login.html',
        controller: 'loginController',
        controllerAs: 'controller'
    })

    .when('/profile', {
        templateUrl: 'pages/profile.html',
        controller: 'profileController'
    });

    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});

thank you!

A:

The issue is your folder structure.
The index.html should be outside of the app folder.
The index.html lives at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.
HEre is an example of folder structure,
app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js

views/
----- mainView.html
----- otherView.html

index.html

Here are some links for your folder structure:
https://johnpapa.net/angular-growth-structure/
https://scotch.io/tutorials/angularjs-best-practices-directory-structure

