We Keep Coding

Loosing hash (#) in Angular URL using ui-router

my singlepage angularjs application can be accessed through the root address of my webserver like.
localhost:8080/
When I chose to go for example to the home-state the application is supposed change the url in the browsers addessfield to localhost:8080/#/home where the first part (localhost:8080/) points to my angular application and the second part (#/home) points to the home-states url.
But instead of doing what it's supposed to do my angular-application changes the url in the browsers addressfield to localhost:8080/home which on reload obviously creates a 404.
Can any of you tell me what I am doing wrong or at least give me a hint on where to look?

disable the html5 mode from the config. add/change the following line in the config
$locationProvider.html5Mode(false);
This will add the # to your url.

You just have to say you don't use the HTML 5 mode with the $locationProvider. In your config file:
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
}]);
JSFiddle demo

Page redirection not working with AngularJS

I am using angularjs routing in my web app, and I have included the $locationProvider and the base tag in HTML head which is <base href="/webapp/"> in order to remove the hash symbol in the URL, it works fine when I redirect using anchor tags e.g. Home but gives a 404 error when I redirect using javascript e.g. window.location.href = '/webapp/home';. Tried everything but so far nothing, any help will be highly appreciated. Thank you in advance.

Try : Home
When you are using angular(JavaScript) routing; JavaScript routing start after # keyword in URL, other wise browser think this is the server side routing trigger; or page will get refresh.
USE : Home
$locationProvider will remove the # after redirecting to the the view.

Throwing cannot get error after enabling html5Mode in AngularJS

I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.

You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode

AngularJS 1.2.x: Change in decoding URL in routing?

I'm trying to migrate my application from AngularJS 1.0.8 to 1.2.14 and it seems like there is some "new" URL decoding in 1.2.
I have following routing:
$routeProvider.when('/title/:simpleName/:simpleVersion', {templateUrl: 'partials/public/view/spec.html', controller: SpecificationCtrl});
$routeProvider.when('/title/:simpleName', {redirectTo: '/title/:simpleName/latest'});
And in one of my directives, I'm creating anchors like this:
link: function(scope, elem, attr) {
elem.html('...')
}
where simpleName can be some string like x/y++_test.
In Angular 1.0.8, if user clicks on such link, browser contains following URL:
.../title/x%252Fy%252B%252B_test
and everything works fine. But with Angular 1.2, browser for a second contains again the escaped form and then URL in browser changes to
.../title/x/y++_test
which is problem as it may not match my routing rules and routing parameters. When this change happens, according to Chrome Dev Tools, the page as such is not reloaded and controllers are created just once when the totally decoded URL is displayed.
Is there some new change that causes? How could I make it working the same way as in 1.0.8 ? I've searched Angular's changelog but haven't found any mention of url decoding.
Update:
I've created to Plunks with Angular 1.0.8 and 1.2.13 to demonstrate the issue (the only difference is that the link is hardcoded in HTML code instead of being generated by directive). Simply click on "here" link in the plunk and watch the displayed URL:
Plunk with Angular 1.0.8
Plunk with Angular 1.2.13

Try this:
<a ng-href="#/title/{{encodeURIComponent(simpleName)}}">...</a>
And inside the controller in case you haven't done it:
$scope.encodeURIComponent = encodeURIComponent;

AngularJS HTML sub routes not showing when url typed in

I have AngularJS setup to use HTML5 routes and it works great on urls like website.com/foo but when I create routes for sub pages, eg: website.com/foo/bar it only shows the correct page when clicking a link to it on my site. If I type the url into my browser and attempt to directly access it I get a blank page section where the ng-view content should be loading.
app.when('/promotion/events', {
templateUrl: '/assets/tpl/promotion/events/home.html',
controller: PromotionEventsCtrl
});

It appears to be a bug in Angular 1.1.5 that is effecting URL parsing in HTML5 routes. Rolling back to 1.1.4 fixes the problem.
More information here: https://github.com/angular/angular.js/issues/2833