skywalker skywalker - 21 days ago 5
AngularJS Question

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!

Answer

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

Comments