Develop Reference

On refresh getting 404 error after enabling $locationProvider.html5Mode(true);

I'm developing an application on angularjs. I tried to remove "index.html#/" from url and used
$locationProvider.html5Mode(true);
in my route.js file (full code snippet provided below). Now my main problem to remove "#" from url is resolved but a new bug arise i.e. now when I'm on a view i.e. localhost:2124/Bill-Paymentand press CTRL + F5 my application redirects me to 404 / default route which I set in route.js file. Now what I want is "when I refresh my view I land on same view/page not on default".
angular.module('app.routes', [])
.config(function ($locationProvider,$stateProvider, $urlRouterProvider, $uiViewScrollProvider) {
// MAIN ROUTE
$stateProvider
// START PAGE ROUTE END
// LOGIN PAGE ROUTE START
.state('login', {
url: '/Bill-Payment',
templateUrl: 'templates/login/login.html',
controller: 'loginController'
})
// NEW MAIN ROUTE END
$uiViewScrollProvider.useAnchorScroll();
// $locationProvider.html5Mode(true).hashPrefix('!');
// OTHERWISE ROUTE
$urlRouterProvider.otherwise("/Index");
});
Any help would be appreciated.

Are these all your routes? There's no /Bill-Payment route here. which means it will go to /Index as specified by your .otherwise route

Unwanted hash '#' in url, using $routeProvider in angularjs

When I'm starting my application the following url is opened: http://localhost:8080/#/. What I'm trying to do is to open this url: http://localhost:8080/ when the application is loaded, but I'm not able to achieve this.
I'm using AngularJS and $routeProvider to load content based on url. I'm quite not sure how it works and documentation is not clear to me. This is the code:
'use strict';
angular.module('login', ['login.filters', 'login.services', 'login.directives', 'login.controllers']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
Can you help me spot unwanted '#' ?

Angular will load pages dynamically and stores/reads the current page from in the url after the # symbol.
You could try enabled html5 mode for location
How to remove the hash # from the angularjs ng-route

Take a look here: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
This describes how to achieve what you want, as well as educating you on what the # is for and how Angular utilizes it

How to use url parameters in angularjs, ui-router and $stateParams

I have followed the instructions from https://github.com/angular-ui/ui-router/wiki/URL-Routing
but cannot get this to work properly.
I have the following:
var application = angular.module('application', ['ui.router']);
application.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/test");
$stateProvider
.state('index', {
url: "/test/:param",
templateUrl: "App/Test.html",
controller: function ($scope, $stateParams) {
alert($stateParams.param);
}
});
$locationProvider.html5Mode(true);
});
Without the /:param this works as you would expect - i.e. the ui-view is correctly populated with Test.html. However, whenever I put the /:param in I get an error. The error is:
GET http://localhost:3880/test/App/Test.html 404 (Not Found)
App is the route of my angular stuff and Test.html should have a path of
http://localhost:3880/App/Test.html
which it does if not trying /:param. However, when trying /:param you can see that there is an extra /test/ in the path before /App.
Please someone help, as I would like to consume the parameter in the controller once it is correct.

You URL for this route should be like this : http://localhost:3880/test/app Where app is param.

Use absolute path for templateUrl. relative url wont work.
templateUrl: "/path/to/App/Test.html",

Routing error in AngularJS

What's wrong with this AngularJS configuration code?
(function () {
var ip = 'x.x.x.x';
var app = angular.module('cmal', ['controllers', 'directives', 'services', 'ngRoute'])
.constant("baseUrl", "http://" + ip + ":303/angular")
.config( function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', { templateUrl: "index.html"});
$routeProvider.when('/users', { templateUrl: "users.html"});
$routeProvider.otherwise({template: "Sorry, the page you are trying to reach doesn't exist."});
});
})();
EDIT: it's not the slash error. This still doesn't work for me and all i get in the console is "Uncaught object"
EDIT 2: Well i didn't realize you needed to import another js script for routing. But so now that I have done that, I get no error, but none of the routes work.

You are probably not including the separate angular-route script.
Take a look at this answer for more details.

This isn't really an answer, but an alternative solution...I used a separate routing framework.
UI-Router (a link to the egghead tutorial)

AngularJS locationProvider Routing

I'm very new to Angular and I'm currently building a few test/dummy apps to get my head around the way it works and become more-familiar with SPA's in Angular. However, I've stumbled into an issue when I start adding routes to my application and loading the content via ng-view
$locationProvider doesn't seem to be working correctly because if I go to localhost/sdfsdf then I get cannot GET /sdfsdf when in reality the page should be redirecting to /cocktails.
routes.js
var cocktailApp = angular.module('cocktailApp', ['ngRoute', 'cocktailControllers']);
cocktailApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/cocktails', {
templateUrl: '/partials/cocktail-list.html',
controller: 'cocktailsController'
})
.otherwise({
redirectTo: '/cocktails'
});
$locationProvider.html5mode(true);
}]);

Angular only recognizes anchor URL syntax for URLs pasted directly on the browser. So you have to you try http://localhost/#/sdfsdf instead to make your routing work. Please note that anchor syntax /# was added in previous URL.