skywalker skywalker - 4 months ago 27
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:

and when I navigate to another pages within the app it appends the location after index.html#/:
Every example I checked was without index.html and appending the location like
My routing:

coursesApp.config(function($routeProvider, $httpProvider) {

// 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!


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,

----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js

----- mainView.html
----- otherView.html


Here are some links for your folder structure: