angularjs routing issue - appends index.html

Question

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!

your index.html should be outside the app folder. then run your app as, http://localhost:8082/basic-web-app/app — Sravan
– Sravan, Commented Nov 12, 2016 at 7:31
I put it outside app folder another blank index.html file and I am able to load it using localhost:8082/basic-web-app/app. The interesting part is that not the blank index.html is loaded but mine. Any ideas? — skywalker
– skywalker, Commented Nov 12, 2016 at 8:51
Thanks for help @Sravan. It worked. I had some wrong configuration — skywalker
– skywalker, Commented Nov 12, 2016 at 9:18

Sravan · Accepted Answer · 2016-11-12 09:33:27Z

1

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

answered Nov 12, 2016 at 9:33

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

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

1 Comment

Sravan Over a year ago

@skywalker, Good to hear your issue solved. I added as an answer, you can vote and accept, if you find it helpful.

Ravi-A-Doer · Accepted Answer · 2016-11-12 07:10:44Z

0

If I got your question right, then:

There is nothing wrong in what you have done. Every Single Page Application framework (AngularJS being one of those) uses the hash - # - intelligently to keep the user on the same page. As long as your views are rendering the way you need, it looks alright.

answered Nov 12, 2016 at 7:10

Ravi-A-Doer

511 silver badge11 bronze badges

Collectives™ on Stack Overflow

angularjs routing issue - appends index.html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related