AngularJS यूआरएल (# प्रतीक) से टुकड़ा पहचानकर्ता को हटाना

257

क्या angular.js URL से # चिन्ह हटाना संभव है?

मैं अब भी ब्राउज़र के बैक बटन आदि का उपयोग करने में सक्षम होना चाहता हूं, जब मैं दृश्य बदलता हूं और URL को params के साथ अपडेट करूंगा, लेकिन मुझे # प्रतीक नहीं चाहिए।

ट्यूटोरियल मार्गप्रोवाइडर को निम्नानुसार घोषित किया गया है:

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

क्या मैं इसे # के बिना समान कार्यक्षमता के लिए संपादित कर सकता हूं?

angularjs url ngroute

— टिम वेबस्टर
स्रोत

13

हैशटैग अच्छा एक

— BoJack घुड़सवार

stackoverflow.com/questions/14319967/…

— Ravimallya

मेरे लिए यहाँ सभी उत्तर गलत हैं। हम url को "दोबारा" लिख सकते हैं और # हटा सकते हैं, लेकिन बिना # के सीधे वेबपेज तक पहुंच नहीं सकते। कोई वास्तविक समाधान यहाँ ???

— 12

यहाँ समाधान है अगर आप कोणीय 1.6 का उपयोग कर रहे हैं ।

— मिस्टालिस

251

हाँ, आप कॉन्फ़िगर करना चाहिए $locationProviderऔर सेट html5Modeकरने के लिए 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);

  }]);

— मैक्सिम ग्रेच
स्रोत

10

क्योंकि IE lt 10 एचटीएमएल 5 इतिहास एपीआई का समर्थन नहीं करता है जिसे स्थापित करके सक्षम किया गया था html5Mode(true)। IE में आपको #मार्गों में उपयोग करना होगा।

— मैक्सिम ग्रेच

10

@powtac का IE lt 10मतलब है इंटरनेट एक्सप्लोरर कम तो संस्करण 10

— मैक्सिम

6

क्या आप इसे IE में # का उपयोग करने के लिए इस फ़ॉलबैक पर सेट कर सकते हैं? क्या यह केवल लपेटने के रूप में सरल $locationProvider.html5Mode(true);है if !(IE lt 10)?

— एंडी हेडन

52

तो यह समाधान url में हैशटैग दिए गए url में हैशटैग को हटाने का हल नहीं करता है, हालांकि यह हल नहीं करता है कि अनुरोधों का जवाब कैसे दें, जो हैशटैग को पहली जगह में शामिल नहीं करना चाहता है। अका, यह blah / # / फोन -> blah / फोन को हल करता है लेकिन यह blah / फोन को सीधे हैंडल नहीं करता है ।

— ल्यूक

9

मुझे अपने index.html <head> सेक्शन में <आधार href = "/" /> डालना होगा।

— nyxz

55

HTML5 इतिहास API के लिए ब्राउज़र समर्थन की जाँच करना सुनिश्चित करें:

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

— SSaidi
स्रोत

23

यह एक टिप्पणी के रूप में बेहतर हो सकता है क्योंकि यह सीधे सवाल का जवाब नहीं देता है।

— ब्रांडनस्क्रिप्ट

31

डेवलपर गाइड के अनुसार , यह पता लगाने का कार्य स्वचालित रूप से किया जाता है:

If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically

— IanB

एक आकर्षण की तरह काम किया है, और मैं ब्राउज़र संस्करण की जाँच करने के बजाय विधि जाँच की सराहना करता हूँ - भविष्य के प्रमाण।

— शेन

46

एक सुंदर URL के लिए हैश टैग को हटाने के लिए और अपने कोड के लिए काम करने के बाद भी आपको उदाहरण के लिए नीचे दिए गए उदाहरण की तरह अपने कोड को तैयार करना होगा:

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

— एमेका Mbah
स्रोत

15

के लिए requireBase: false+1

— whoan

2

नमस्कार @digitlimit, $locationProvider.html5Modeकोड जोड़ने के बाद मेरे कोड $urlRouterProvider.otherwise('/home');ने काम करना बंद कर दिया।

— जयकरत

18

मैं $locationProvider.html5Mode(true)सेट होने के बाद web.config में एक नियम लिखता हूं app.js।

आशा है, किसी की मदद करता है।

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

अपने index.html में मैंने इसे जोड़ा <head>

<base href="/">

सर्वर पर iis के लिए url rewriter स्थापित करना न भूलें।

यदि आप वेब एप और आईआईएस का उपयोग करते हैं, तो भी यह मैच यूआरएल काम नहीं करेगा, क्योंकि यह आपके एपि कॉल को बदल देगा। इसलिए तीसरा इनपुट जोड़ें (तीसरी पंक्ति की स्थिति) और एक पैटर्न दें जो कॉल को बाहर कर देगाwww.yourdomain.com/api

— यागीज़ ओज़टर्क
स्रोत

1

आप IIS के लिए url rewriter कैसे स्थापित करते हैं? मैं Azure पर होस्ट कर रहा हूं।

— प्रभु

11

यदि आप AngVCJS के साथ MVC के साथ .NET स्टैक में हैं, तो आपको url से '#' निकालने के लिए यह करना होगा:

अपने आधार पृष्ठ को अपने _Layout पृष्ठ में सेट करें: <head> <base href="https://stackoverflow.com/"> </head>
फिर, अपने कोणीय एप्लिकेशन कॉन्फिगर में निम्नलिखित जोड़ें: $locationProvider.html5Mode(true)
ऊपर url से '#' हटा देंगे, लेकिन पेज रिफ्रेश काम नहीं करेगा जैसे अगर आप "yoursite.com/about" पेज में हैं, तो रिफरेश आपको 404 देगा। ऐसा इसलिए है क्योंकि MVC को कोणीय रूटिंग के बारे में नहीं पता है और MVC पैटर्न द्वारा 'एमवीसी' के लिए एमवीसी पृष्ठ की तलाश करेगा जो एमवीसी मार्ग में मौजूद नहीं है। इसके लिए समाधान सभी MVC पृष्ठ अनुरोध को एक ही MVC दृश्य में भेजना है और आप ऐसा कर सकते हैं कि एक मार्ग जोड़कर जो सभी को पकड़ता है

यूआरएल:

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

— Maksood
स्रोत

मुझे कौन सी फ़ाइल मार्गों को जोड़ना चाहिए। MapRoute?

— विचनक

1

फ़ोल्डर App_Start तहत RouteConfig.cs अपने

— Maksood

5

आप html5mode को ट्वीक कर सकते हैं लेकिन यह केवल आपके पेज के html एन्कर्स में शामिल लिंक के लिए कार्यात्मक है और ब्राउज़र एड्रेस बार में url कैसा दिखता है। पृष्ठ के बाहर कहीं से भी हैशटैग (html5mode के साथ या बिना) के बिना उपपृष्ठ का अनुरोध करने का प्रयास करने से 404 त्रुटि होगी। उदाहरण के लिए, निम्नलिखित CURL अनुरोध के परिणामस्वरूप पृष्ठ में त्रुटि मिली, भले ही HTML5mode न हो:

$ curl http://foo.bar/phones

हालांकि निम्नलिखित रूट / होम पेज लौटाएगा:

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

इसका कारण यह है कि सर्वर पर अनुरोध आने से पहले हैशटैग के बाद कुछ भी बंद कर दिया जाता है। तो http://foo.bar/#/portfolioसर्वर के लिए एक अनुरोध के लिए अनुरोध के रूप में आता है http://foo.bar। सर्वर 200 ओके रिस्पांस (संभवतः) के साथ प्रतिक्रिया देगा http://foo.barऔर एजेंट / क्लाइंट बाकी को प्रोसेस करेगा।

तो ऐसे मामलों में जो आप दूसरों के साथ एक यूआरएल साझा करना चाहते हैं, आपके पास हैशटैग को शामिल करने के अलावा कोई विकल्प नहीं है।

— क्रिस
स्रोत

क्या इसके आसपास कोई रास्ता नहीं है? यह एक बहुत बड़ा मुद्दा है।

— 1944 में user441521

5

2 चरणों का पालन करें-
1. सबसे पहले अपनी ऐप कॉन्फिगर फाइल में $ locationProvider.html5Mode (ट्रू) सेट करें ।
उदाहरण के लिए -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2. अपने मुख्य पृष्ठ के अंदर <आधार> सेट करें ।
उदाहरण के लिए ->
<base href="https://stackoverflow.com/">

HTML5 इतिहास API का समर्थन नहीं करने वाले ब्राउज़रों के लिए $ स्थान सेवा स्वचालित रूप से हैश-भाग विधि में वापस आ जाएगी।

— अंशुल बिष्ट
स्रोत

3

मेरा समाधान है .htaccess और #Sorian कोड का उपयोग करें .. बिना .htaccess के मैं # निकालने में विफल रहा

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]

— थॉमस नैपेक
स्रोत

1

प्रलेखन के अनुसार। आप उपयोग कर सकते हैं:

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

एनबी: यदि आपका ब्राउज़र एचटीएमएल 5 का समर्थन नहीं करता है, तो चिंता न करें: डी के पास हैशबैंग मोड में कमबैक है। तो, आपको if(window.history && window.history.pushState){ ... }मैन्युअल रूप से जांच करने की आवश्यकता नहीं है

उदाहरण के लिए: यदि आप क्लिक करते हैं: <a href="https://stackoverflow.com/other">Some URL</a>

HTML5 ब्राउज़र में : कोणीय स्वचालित रूप से रीडायरेक्ट करेगाexample.com/other

HTML5 ब्राउज़र में नहीं : कोणीय स्वचालित रूप से रीडायरेक्ट करेगाexample.com/#!/other

— प्रेमचंदिका प्रतिमा
स्रोत

1

यह उत्तर मानता है कि आप nginx को रिवर्स प्रॉक्सी के रूप में उपयोग कर रहे हैं और आपने पहले ही $ locationProvider.html5mode को सही पर सेट कर दिया है।

-> उन लोगों के लिए जो अभी भी ऊपर सभी शांत सामान के साथ संघर्ष कर रहे हैं।

निश्चित रूप से, @ मक्सिम ग्रैच सॉल्यूशन ठीक काम करता है, लेकिन इस समाधान के लिए कि कैसे उन अनुरोधों का जवाब देना है जो नहीं चाहते कि हैशटैग को पहले स्थान पर शामिल किया जाए जो कि किया जा सकता है, अगर php 404 भेज रहा है और फिर url को फिर से लिखना है। निम्नलिखित नगीने के लिए कोड है,

Php स्थान में, 404 php त्रुटि का पता लगाएं और दूसरे स्थान पर पुनर्निर्देशित करें,

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

फिर यूआरएल को रीडायरेक्ट लोकेशन में फिर से लिखें और डेटा को ऑफकोर्स करें, ऑफकोर्स करें, अपने वेबसाइट के यूआरएल को मेरे ब्लॉग के यूआरएल पर रखें। (निवेदन: यह कोशिश करने के बाद ही प्रश्न करें)

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

और जादू देखें।

और यह निश्चित रूप से काम करता है, मेरे लिए कम से कम।

— Satys
स्रोत

इसे कहां जोड़ा जाए?

— Volatil3

उपरोक्त कोड कहां जोड़ें? उन्हें मुख्य Nginx config फ़ाइल में रखें।

— सायं

1

Index.html से शुरू करें इसे सभी #से हटा दें <a href="#/aboutus">About Us</a>ताकि यह दिखाई दे। <a href="https://stackoverflow.com/aboutus">About Us</a>अब index.html के हेड टैग में <base href="https://stackoverflow.com/">अंतिम मेटा टैग के ठीक बाद लिखें ।

अब आपके रूटिंग js इंजेक्शन में $locationProviderऔर $locatonProvider.html5Mode(true); कुछ इस तरह लिखें : -

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

अधिक जानकारी के लिए इस वीडियो को देखें https://www.youtube.com/watch?v=XsRugDQaGOo

— अनिकेत झा
स्रोत

सभी # Url को हटाने में मदद मिली क्योंकि मैं इसे #urls को हटाए बिना परीक्षण कर रहा था।

— optimistanoop

1

लगता है कि यह इसके लिए वास्तविक रूप से देर हो चुकी है। लेकिन app.module आयात करने के लिए नीचे विन्यास जोड़ने काम करता है:

RouterModule.forRoot(routes, { useHash: false })

— सागर भट
स्रोत

0

चरण 1: ऐप कॉन्फिगर के कंस्ट्रक्टर में $ लोकेशनप्रोवाइडर सेवा को इंजेक्ट करें

चरण 2: कोड लाइन $ लोकेशन जोड़ें Provider.html5Mode (ट्रू) ऐप कॉन्फिगरेशन कंस्ट्रक्टर के पास।

चरण 3: कंटेनर (लैंडिंग, मास्टर या लेआउट) पृष्ठ में, टैग के <base href="https://stackoverflow.com/">अंदर html टैग जोड़ें ।

चरण 4: सभी एंकर टैगों से कॉन्फ़िगरेशन को रूट करने के लिए सभी '# "को हटा दें। उदाहरण के लिए, href =" # होम "href =" होम "हो जाता है; href =" # "के बारे में" हर्फ़ = "हो जाता है"; href = "संपर्क "href =" संपर्क "बन जाता है"

 <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
स्रोत

-1

बस जोड़ने $locationProviderमें

.config(function ($routeProvider,$locationProvider)

और फिर $locationProvider.hashPrefix(''); बाद में जोड़ें

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

बस।

— नरेंद्र सोलंकी
स्रोत