Usuwanie identyfikatora fragmentu z adresów URL AngularJS (symbol# )

Question

Usuwanie identyfikatora fragmentu z adresów URL AngularJS (symbol# )

Czy możliwe jest usunięcie symbolu # z kąta.js URLs?

Nadal chcę móc korzystać z przycisku Wstecz przeglądarki itp., gdy zmienię widok i zaktualizuję adres URL za pomocą params, ale nie chcę symbolu#.

RouteProvider jest zadeklarowany w następujący sposób:

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

Czy Mogę to edytować, aby mieć taką samą funkcjonalność bez #?

247

angularjs url ngroute

Author: Ricky Dam, 2013-02-08

Source

14 answers

Pamiętaj, aby sprawdzić obsługę przeglądarki dla HTML5 history API:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }

55

Author: SSaidi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-07 07:30:27

Aby usunąć Hash tag dla pretty URL a także aby Twój Kod działał po minifikacji musisz struktura kodu jak w poniższym przykładzie:

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);

44

Author: Digitlimit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-08 11:39:43

Piszę regułę w sieci.config po ustawieniu {[2] } w app.js.

Hope, pomaga komuś.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

W moim indeksie.html dodałem to do <head>

<base href="/">

Nie zapomnij zainstalować URL rewriter dla iis na serwerze.

Również jeśli używasz Web Api i IIS, ten adres URL dopasowania nie zadziała, ponieważ zmieni Twoje wywołania api. Więc dodaj trzecie wejście (trzecia linia warunku) i podaj wzorzec, który wykluczy wywołania z www.yourdomain.com/api

17

Author: Yagiz Ozturk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-19 07:15:28

Jeśli jesteś w stos. NET z MVC z AngularJS, to jest to, co musisz zrobić, aby usunąć ' # ' z url:

Skonfiguruj swój podstawowy href na swojej stronie _Layout: <head> <base href="/"> </head>
Następnie dodaj obserwację w konfiguracji aplikacji angular : $locationProvider.html5Mode(true)
Powyżej usunie " # " z adresu url, ale odświeżanie strony nie będzie działać np. jeśli jesteś w "yoursite.com/about" refreash strony daje 404. Dzieje się tak dlatego, że MVC nie wie o routingu kątowym i według wzorca MVC będzie poszukaj strony MVC dla 'about', która nie istnieje w ścieżce routingu MVC. Obejście tego problemu polega na wysłaniu wszystkich żądań strony MVC do jednego widoku MVC i można to zrobić, dodając trasę, która wychwytuje wszystkie

Url:

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);

9

Author: Maksood,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-27 10:58:07

Możesz dostosować html5mode, ale działa to tylko dla linków zawartych w zakotwiczeniach html Twojej strony i jak wygląda adres url w pasku adresu przeglądarki. Próba zażądania podstrony bez hashtagu (z lub bez html5mode) z dowolnego miejsca poza stroną spowoduje błąd 404. Na przykład, następujące żądanie CURL spowoduje błąd nie znaleziono strony, niezależnie od html5mode:

$ curl http://foo.bar/phones

Chociaż poniższe zwróci root / home Strona:

$ curl http://foo.bar/#/phones

Powodem tego jest to, że wszystko po hashtagu jest usuwane, zanim żądanie dotrze do serwera. Tak więc Prośba o http://foo.bar/#/portfolio dociera do serwera jako prośba o http://foo.bar. Serwer odpowie 200 OK response (przypuszczalnie) dla http://foo.bar, A agent/klient przetworzy resztę.

Więc w przypadkach, w których chcesz udostępnić adres url innym, nie masz opcji, jak tylko dołączyć hashtag.

5

Author: chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-05 14:48:08

Wykonaj 2 kroki -
1. Najpierw ustaw $ locationProvider.html5Mode (true) w pliku konfiguracyjnym aplikacji.
dla eg -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Po drugie ustaw wewnątrz swojej strony głównej.
Dla eg ->
<base href="/">

Usługa $ location automatycznie powróci do metody hash-part dla przeglądarek, które nie obsługują interfejsu HTML5 History API.

5

Author: Anshul Bisht,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-14 08:37:40

Moim rozwiązaniem jest tworzenie .htaccess i użyj kodu # Sorian.. bez .htaccess nie udało mi się usunąć #

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

3

Author: Thomas Knápek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-08 12:33:23

Jak wspomniano powyżej odpowiedzi kroki są-

Dodaj do indeksu.html Włącz html5mode $ location.html5Mode (true) w aplikacji.js.

Dzięki temu aplikacja będzie działać dobrze. Ale tylko w scenariuszach, gdy poruszasz się z indeksu.html do innych stron. Na przykład moja strona bazowa to - www.javainuse.com. jeśli kliknę na link java to poprawnie przejdzie do www.javainuse.com/java.

Jednakże jeśli bezpośrednio udam się do www.javainuse.com/java nie znaleziono strony błąd.

Aby rozwiązać ten problem musimy użyć przepisywania adresu url. Dot net wymaga przepisania adresu URL dla usług IIS.

Jeśli używasz tomcat, to przepisywanie URL będzie musiało być wykonane za pomocą Tuckey. Możesz uzyskać więcej informacji na temat przepisywania URL tutaj

3

Author: Rameez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-17 13:19:16

Zgodnie z dokumentacją. Można użyć:

$locationProvider.html5Mode(true).hashPrefix('!');

Uwaga: Jeśli twoja przeglądarka nie obsługuje HTML 5. Nie martw się :D ma powrót do trybu hashbang. Nie musisz więc sprawdzać ręcznie if(window.history && window.history.pushState){ ... }

Na przykład: jeśli klikniesz: <a href="/other">Some URL</a>

W przeglądarce HTML5 : angular automatycznie przekieruje do example.com/other

W przeglądarce Nie HTML5 : angular automatycznie przekieruje na example.com/#!/other

1

Author: Efriandika Pratama,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-06 06:11:42

Ta odpowiedź zakłada, że używasz nginx jako odwrotnego proxy i już Ustawiłeś $locationProvider.html5mode do true.

- > dla ludzi, którzy mogą nadal zmagać się z wszystkimi fajnymi rzeczami powyżej.

Z pewnością, @Maxim grach rozwiązanie działa dobrze, ale dla rozwiązania, jak reagować na żądania, które nie chcą hashtag być zawarte w pierwszej kolejności, co można zrobić, to sprawdzić, czy php wysyła 404, a następnie przepisać adres url. Poniżej znajduje się kod dla nginx,

W lokalizacji php, Wykryj błąd 404 php i Przekieruj do innej lokalizacji,

location ~ \.php${
  ...
  fastcgi_intercept_errors on;
  error_page 404 = /redirect/$request_uri ;
}

Następnie przepisać adres url w lokalizacji przekierowania i proxy_pass dane, oczywiście, umieścić adres URL witryny w miejscu adresu URL mojego bloga. (Prośba: pytaj o to dopiero po wypróbowaniu)

location /redirect {
  rewrite ^/redirect/(.*) /$1;
  proxy_pass http://www.techromance.com;
}

I zobaczyć magię. I na pewno działa, przynajmniej dla mnie.

1

Author: Satys,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-04 12:15:38

Krok 1: wstrzyknięcie usługi $ locationProvider do konstruktora konfiguracji aplikacji

Krok 2: Dodaj wiersz kodu $locationProvider.html5Mode (true) do konstruktora konfiguracji aplikacji.

Krok 3: na stronie kontenera (landing, master lub layout) Dodaj znacznik html, taki jak <base href="/"> wewnątrz znacznika.

Krok 4: Usuń Wszystkie ' # " dla routingu config ze wszystkich tagów zakotwiczenia. Na przykład, href = "# home "staje się href= "home"; href= "# about "staje się herf= "about"; href= "# contact " staje się href= "kontakt"

 <ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>

0

Author: Thomas.Benz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-19 19:57:48

Zacznij od indeksu.html usuwa wszystkie # z <a href="#/aboutus">About Us</a> więc musi wyglądać jak <a href="/aboutus">About Us</a>.Teraz w znaczniku głównym indeksu.zapis html <base href="/"> tuż po ostatnim meta tag .

Teraz w Twoim routingu js inject $locationProvider i napisz $locatonProvider.html5Mode(true); Coś Takiego: -

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

Po Więcej Szczegółów obejrzyj ten film https://www.youtube.com/watch?v=XsRugDQaGOo

0

Author: Aniket Jha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-25 06:14:54

Wystarczy dodać $locationProvider W

.config(function ($routeProvider,$locationProvider)

A następnie dodaj $locationProvider.hashPrefix(''); po

.otherwise({
        redirectTo: '/'
      });

To wszystko.

-1

Author: Narendra Solanki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-21 06:28:28

score 244 · Accepted Answer

Tak, należy skonfigurować $locationProvider I set html5Mode do true:

angular.module('phonecat', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);