How can I remove the hash from the url in angularjs

Question

How can I remove the hash from the url in angularjs

Navigation

#1 by (1 votes)

2

I'm in a project that uses mvc 4 and angular.

I have a problem with angular:

I'm in the login screen and after logging in I want to use $location.url('/Home/Index'); to redirect to the main page of the system but it does not work for me.

In the browser, it sends me to this route: http://localhost:9771/#/Home/Index

When the correct one should be http://localhost:9771/Home/Index

Then I do not understand in what way I should use $location

javascript angularjs

asked by Matias Llanos 23.08.2016 в 19:24

source

1 answer

Put the current date by Default in the calendar Errors when using static libraries in QT

score 1 · Accepted Answer

The solution depends on how you have configured your application and your server.

HTML5 Mode

This solution assumes that you are building a SPA .

This means that for any main route of your application on the server (not a particular fragment of view) you are going to send the same thing that you send when you are requested /Home/Index and on that page you have all your scripts and the scripts of angular loaded. On top of that you are using the module ngRoute or ui-router

Eg, you always send this

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <link rel="stylesheet" href="/Content/css/style.css" />
</head>

<body>
    <div ng-view></div>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/app.js"></script>
    <script src="/Scripts/rutas.js"></script>
</body>

</html>

You have to enable in HTM5 mode in $ locationProvider . In a config of your application you write something like this (usually when you define your routes in the client)

angular.module('app', [])
    .config(function($locationProvider) {
        // Habilitar modo html5
        $locationProvider.html5Mode(true);
    });

This effectively uses the browser History API instead of refreshing the entire page by what you just have to send data and fragments to build your application. This removes the hash ( # ) or hashbang ( #! ), if you have configured it that way, and updates the urls as if you were requesting them directly from the server.

Location

This solution is for when NO you are building a SPA and your server sends you different pages in each request where you include angular only as DOM manipulator and not to define your route system.

Ex:

/Home/Index sends you a% full% page with a controller <html>

IndexController sends you a% full% page with a controller /Home/About

This solution requires to discard the use of <html> and use something like

instead

$window.location.href = '/Home/Index';

This will effectively eliminate hashing or hashing since it only makes a full reload of the page when

Find links that have a AboutController attribute

<a href="/Home/Index" target="_self">vinculo</a>

Find absolute links that go to another domain

<a href="http://otrapagina.com/">vinculo</a>

Find links that begin with $location and direct to a base different from the one declared in the document
```
<base href="/app"> 
<a href="/otraapp/Home/Index">vinculo</a>
```
The url is modified directly using the native javascript API ( target )