Parça tanımlayıcısını AngularJS url'lerinden kaldırma (# simgesi)

257

# Sembolünü angular.js URL'lerinden kaldırmak mümkün mü?

Görünümü değiştirdiğimde ve URL'yi parametrelerle güncellediğimde hala tarayıcının geri düğmesini vb. Kullanabilmek istiyorum, ancak # sembolünü istemiyorum.

RouteProvider öğreticisi şu şekilde bildirilir:

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'});
}]);

# Olmadan aynı işlevselliğe sahip olmak için bunu düzenleyebilir miyim?

angularjs  url  ngroute 
— Tim Webster
kaynak
13
hashtag nice one
— BoJack Horseman
— Ravimallya
Benim için buradaki cevap yanlış. URL'yi "yeniden yazabilir" ve # işaretini kaldırabiliriz, ancak # olmadan doğrudan web sayfasına asla erişemeyiz. Burada herhangi bir gerçek çözüm ???
— amdev
Angular 1.6 kullanıyorsanız çözüm burada .
— 17'de Mistalis

Yanıtlar:

251

Evet, yapılandırmanız $locationProviderve şu şekilde ayarlamanız html5Modegerekir 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);

  }]);
— Maxim Grach
kaynak
10
Çünkü IE 10 lt kurarak devreye sokuldu HTML5 tarih API desteklemez html5Mode(true). IE'de #rotalarda kullanmak zorundasınız .
— Maxim Grach
10
@powtac IE lt 10, Internet Explorer'ın sürüm 10'dan daha az olduğu anlamına gelir
— Maxim Grach
6
IE'de # kullanarak bu geri dönüşü ayarlayabilir misiniz? Sadece sarma olarak basit olarak mı $locationProvider.html5Mode(true);içinde if !(IE lt 10)?
— Andy Hayden
52
Dolayısıyla bu çözüm, url'de bir hashtag bulunduğundan url'deki hashtag'in kaldırılmasını çözer, ancak hashtag'in ilk sırada yer almasını istemeyen isteklere nasıl yanıt verileceğini çözmez. Aka, blah / # / telefonları -> blah / telefonları çözer, ancak blah / telefonları doğrudan ele almaz .
— Luke
9
Benim index.html <head> bölümüne <base href = "/" /> koymak gerekiyordu.
— nyxz
55

Html5 geçmiş API'sı için tarayıcı desteğini kontrol ettiğinizden emin olun:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }
— SSaidi
kaynak
23
Bu, doğrudan soruyu cevaplamadığı için yorum olarak daha uygun olabilir.
— brandonscript
31
Göre , geliştirici kılavuzunun , bu algılama otomatik olarak yapılır:If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically
— IanB
Bir cazibe gibi çalıştı ve tarayıcı sürüm kontrolü yerine yöntem kontrolü için teşekkür ederiz - gelecekteki kanıtı.
— Shane
46

Güzel bir URL ve ayrıca kodunuzun küçültmeden sonra çalışması için Karma etiketini kaldırmak için kodunuzu aşağıdaki örnek gibi yapılandırmanız gerekir:

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="https://stackoverflow.com/">

         // 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
          });
        }
    }]);
— Emeka Mbah
kaynak
15
İçin requireBase: false1
— whoan
2
Merhaba @digitlimit, $locationProvider.html5ModeKod ekledikten sonra kodum $urlRouterProvider.otherwise('/home');durdu.
— Jaikrat
18

Ben sonra web.config bir kural yazmak $locationProvider.html5Mode(true)ayarlanır app.js.

Umut, birine yardım eder.

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

İndex.html dosyasında bunu <head>

<base href="/">

Sunucuya iis için url yeniden yazmayı yüklemeyi unutmayın.

Ayrıca Web Api ve IIS kullanıyorsanız, api çağrılarınızı değiştireceğinden bu eşleşme URL'si çalışmaz. Üçüncü girişi (üçüncü koşul satırı) ekleyin ve çağrıları hariç tutacak bir model verinwww.yourdomain.com/api

— Yağız Öztürk
kaynak
1
IIS için url yeniden yazıcısını nasıl yüklersiniz? Azure'da ev sahipliği yapıyorum.
— Prabhu
11

AngularJS ile MVC ile .NET yığınında iseniz, '#' url kaldırmak için yapmanız gereken budur:

  1. _Layout sayfanızda temel href'nizi ayarlayın: <head> <base href="https://stackoverflow.com/"> </head>

  2. Ardından, açısal uygulama yapılandırmanıza aşağıdakileri ekleyin: $locationProvider.html5Mode(true)

  3. Yukarıda '#' url'den kaldırılacak, ancak sayfa yenileme çalışmaz, örneğin "siteniz.com/about" sayfasında bulunuyorsanız, sayfa refreash size 404 verecektir. Bunun nedeni, MVC'nin açısal yönlendirme hakkında bilgi sahibi olmaması ve MVC kalıbıyla MVC yönlendirme yolunda bulunmayan 'about' için bir MVC sayfası arayacaktır. Bunun çözümü, tüm MVC sayfa isteklerini tek bir MVC görünümüne göndermektir ve bunu, tümünü yakalayan bir rota ekleyerek yapabilirsiniz

url: 

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
— Maksood
kaynak
Rotaları hangi dosyaya eklemeliyim.MapRoute?
— Vicheanak
1
RouteConfig.cs altında App_Start klasörü
— Maksood
5

Html5mode üzerinde ince ayar yapabilirsiniz, ancak bu yalnızca sayfanızın html çapalarında bulunan bağlantılar ve url'nin tarayıcı adres çubuğunda nasıl göründüğü için işlevseldir. Sayfanın dışındaki herhangi bir yerden hashtag olmadan (html5mode olsun veya olmasın) bir alt sayfa istemeye çalışmak, 404 hatasına neden olur. Örneğin, aşağıdaki CURL isteği, html5mode'dan bağımsız olarak bir sayfa bulunamadı hatasına neden olur:

$ curl http://foo.bar/phones

ancak aşağıdakiler kök / ana sayfayı döndürür:

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

Bunun nedeni, hashtag'den sonraki herhangi bir şeyin, istek sunucuya gelmeden önce kaldırılmasıdır. Böylece http://foo.bar/#/portfoliosunucuya istek olarak bir istek gelir http://foo.bar. Sunucu için 200 OK yanıtı (muhtemelen) yanıt http://foo.barverecek ve aracı / istemci geri kalanını işleyecektir.

Dolayısıyla, bir URL'yi başkalarıyla paylaşmak istediğiniz durumlarda, hashtag'i eklemek dışında bir seçeneğiniz yoktur.

— chris
kaynak
Bunun etrafında bir yol yok mu? Bu oldukça büyük bir mesele.
— user441521
5

2 adımı izleyin-
1. İlk olarak uygulama yapılandırma dosyanızda $ locationProvider.html5Mode (true) değerini ayarlayın .
Örneğin -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.İkinci sayfanızın içindeki <taban> öğesini ayarlayın .
Örneğin, ->
<base href="https://stackoverflow.com/">

$ Location hizmeti, HTML5 Geçmiş API'sını desteklemeyen tarayıcılar için otomatik olarak karma parçası yöntemine geri döner.

— Anshul Bisht
kaynak
3

Benim çözüm .htaccess oluşturmak ve #Sorian kodunu kullanmak .. .htaccess olmadan # kaldıramadı

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]
— Thomas Knápek
kaynak
1

Belgelere göre. Kullanabilirsiniz:

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

Not: Tarayıcınız HTML 5'i desteklemiyorsa endişelenmeyin: D hashbang moduna geri dönüyor. Yani, if(window.history && window.history.pushState){ ... }elle kontrol etmenize gerek yok

Örneğin: <a href="https://stackoverflow.com/other">Some URL</a>

HTML5 Tarayıcısında : açısal otomatik olarakexample.com/other

HTML5 Tarayıcısında değil : açısal otomatik olarakexample.com/#!/other

— Efriandika Pratama
kaynak
1

Bu yanıt, nginx'i ters proxy olarak kullandığınızı ve $ locationProvider.html5mode öğesini true olarak ayarladığınızı varsayar.

-> Yukarıdaki tüm harika şeylerle hala mücadele eden insanlar için.

Şüphesiz, @maxim grach çözümü iyi çalışır, ancak hashtag'in ilk sırada yer almasını istemeyen isteklere nasıl yanıt verileceği için php 404 gönderip göndermediğini kontrol edin ve sonra url'yi yeniden yazın. Aşağıda nginx kodu,

Php konumunda, 404 php hatasını tespit edin ve başka bir konuma yönlendirin, 

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

Ardından URL'yi yeniden yönlendirme konumuna yeniden yazın ve proxy_pass verileri, offcourse, web sitenizin URL'sini blogumun URL'sinin yerine koyun. (İstek: Bunu yalnızca denedikten sonra sorgulayın)

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

Ve büyüyü görün.

Ve kesinlikle işe yarıyor, en azından benim için.

— Satys
kaynak
Bunu nereye ekleyebilirim?
— Volatil3
Yukarıdaki kod nereye eklenmeli? Bunları ana Nginx yapılandırma dosyasına koyun.
— Satys
1

Başlangıç bütün index.html kaldır dan #itibaren <a href="#/aboutus">About Us</a>benziyor gerekir böylece <a href="https://stackoverflow.com/aboutus">About Us</a>index.html yazma başkanı etiketinde .Şimdi <base href="https://stackoverflow.com/">sadece geçen sonrası meta etiketinde .

Şimdi yönlendirme js enjekte $locationProviderve böyle bir $locatonProvider.html5Mode(true); şey yazmak : -

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);
    });

Daha fazla ayrıntı için bu videoyu izleyin https://www.youtube.com/watch?v=XsRugDQaGOo

— Aniket Jha
kaynak
Tüm URL'leri kaldırmak, #urls kaldırmadan test ettiğim için yardımcı oldu.
— optimistanoop
1

Sanırım bu gerçekten çok geç. Ancak app.module içe aktarma işlemine aşağıdaki yapılandırmayı eklemek işi yapar:

RouterModule.forRoot(routes, { useHash: false })
— Sagar Bhat
kaynak
0

1. Adım: $ locationProvider hizmetini uygulama yapılandırmasının yapıcısına enjekte edin

Adım 2: Uygulama yapılandırmasının yapıcısına $ locationProvider.html5Mode (true) kod satırını ekleyin.

Adım 3: Kapsayıcı (açılış, kalıp veya düzen) sayfasında, etiketin <base href="https://stackoverflow.com/">içindeki gibi html etiketi ekleyin .

Adım 4: Tüm yönlendirme etiketlerinden yapılandırma yönlendirmesi için tüm '#' işaretlerini kaldırın.Örneğin, href = "# home" href = "home" olur; href = "# about" herf = "about"; href = "# kişisi olur "href =" iletişim "olur

 <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>
— Thomas.Benz
kaynak
-1

Sadece eklemek $locationProviderIn

.config(function ($routeProvider,$locationProvider)

ve daha sonra ekleme $locationProvider.hashPrefix(''); sonra

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

Bu kadar.

— Narendra Solanki
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.