AngularJS रूटिंग बिना हैश '#'


223

मैं AngularJS सीख रहा हूं और एक चीज है जो वास्तव में मुझे परेशान करती है।

मैं $routeProviderअपने आवेदन के लिए रूटिंग नियम घोषित करने के लिए उपयोग करता हूं:

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

लेकिन जब मैं ब्राउज़र में अपने ऐप को नेविगेट करता हूं तो मैं इसके app/#/testबजाय देखता हूं app/test

तो मेरा सवाल यह है कि AngularJS इस हैश #को urls में क्यों जोड़ता है? क्या इससे बचने की कोई संभावना है?


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

जवाबों:


265

वास्तव में आपको गैर एचटीएमएल 5 ब्राउज़रों के लिए # (हैशटैग) की आवश्यकता होती है।

अन्यथा वे केवल उल्लेख किए गए href पर सर्वर पर एक HTTP कॉल करेंगे। # एक पुराना ब्राउज़र शॉर्स्किट है जो अनुरोध को आग नहीं देता है, जो कई जेएस फ्रेमवर्क को अपने स्वयं के क्लाइंटसाइड को उसके शीर्ष पर पुन: उत्पन्न करने की अनुमति देता है।

$locationProvider.html5Mode(true)यदि उपलब्ध हो तो आप HTML5 रणनीति का उपयोग करने के लिए कोणीय बताने के लिए उपयोग कर सकते हैं ।

यहां HTML5 रणनीति का समर्थन करने वाले ब्राउज़र की सूची: http://caniuse.com/#feat=history


4
ठीक है धन्यवाद। यह कुछ ऐसा है जिस पर मुझे संदेह है। लेकिन मेरे लिए यह बहुत ही उपयोगकर्ता-अमित्र है! मान लीजिए कि मैं चाहता हूं कि कुछ संसाधन url, ऐप / रेस के माध्यम से उपलब्ध हों। मेरी साइट के उपयोगकर्ता कैसे पता लगा सकते हैं कि उन्हें इसके बजाय ऐप / # / res टाइप करना चाहिए?
pikkvile

5
लेकिन यदि हां, तो मुझे लोकेशन बार में दिखाई देने के लिए इन रास्तों की आवश्यकता क्यों है? यदि उपयोगकर्ता उनका उपयोग नहीं करेंगे, तो मैं केवल सिंगल-पेज जावास्क्रिप्ट एप्लिकेशन बना सकता हूं।
pikkvile

6
यह उपयोगी है जब आप एप्लिकेशन स्थिति का ट्रैक रखना चाहते हैं। चौखटे एक इतिहास तंत्र प्रदान करते हैं। इसके अतिरिक्त, यह उदाहरण के लिए url साझा करने के माध्यम से आपके एप्लिकेशन की प्रत्यक्ष स्थिति को एक्सेस करने की अनुमति देता है
अलावा-

6
एचटीएमएल 5 इतिहास एपीआई का समर्थन करने वाले आधुनिक ब्राउज़रों में हैशटैग की आवश्यकता नहीं है। @ Skeep का उत्तर और उपलब्ध कराए गए लिंक देखें। HTML5 मोड में, कोणीय केवल हैशटैग का उपयोग करेगा यदि ब्राउज़र इसका समर्थन नहीं करता है। ध्यान दें, अगर आप नहीं चाहते हैं तो आपको $ मार्गप्रोवीडर का उपयोग नहीं करना है ... आप एनजी-क्लिक और एनजी-इन का उपयोग करके अपने स्वयं के रूटिंग को तार कर सकते हैं (वास्तव में आपको ऐसा करना होगा यदि आपको कई स्तरों की आवश्यकता है मार्ग, चूंकि एनजी-व्यू केवल प्रति पृष्ठ एक बार दिखाई दे सकता है)। यह भी देखें stackoverflow.com/questions/12793609/...
मार्क Rajcok

2
हैशबैंग / पुशस्टेट / सर्वर-साइड रेंडरिंग html केस के लिए, ट्विटर पर इंजीनियरिंग .twitter.com/2012/12/… पढ़ने में बहुत अच्छा है, यह बताता है कि वे कैसे ऐसा करने में कामयाब रहे, इसलिए यह पुराने ब्राउज़र के साथ और खोज के साथ पीछे है। इंजन। मुझे पता है कि यह कोणीय विशेष नहीं है, लेकिन आप प्रवाह को पुन: उत्पन्न कर सकते हैं।
जैकबर्निअर

47

यदि आपने HTML5mode को सक्षम किया है, जैसा कि अन्य लोगों ने कहा है, और .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]

उचित मार्ग में प्रवेश करने पर उपयोगकर्ताओं को आपके ऐप पर निर्देशित किया जाएगा, और आपका ऐप मार्ग को पढ़ेगा और उसे उसके भीतर सही "पृष्ठ" पर लाएगा।

संपादित करें: बस सुनिश्चित करें कि आपके मार्गों के साथ कोई फ़ाइल या निर्देशिका नाम संघर्ष नहीं है।


वहाँ इस का एक nginx संस्करण है? जब /aboutतक मैं पृष्ठ को लोड नहीं करता, जब तक मैं ऐप के माध्यम से इसमें नहीं आता।
20

कभी भी उनका उपयोग नहीं किया, लेकिन यह प्रयास करें: stackoverflow.com/questions/5840497/convert-htaccess-to-nginx
दाढ़ी

3
@chovy - यहाँ nGinx वर्जन जाता है: सर्वर {server_name my-app; root / path / to / app; स्थान / {try_files $ uri $ uri / /index.html; }}
मोइन हैदर

4
याद रखें <आधार href = "/"> </ आधार> हेड टैग में
सिल्वियो ट्रोया

धन्यवाद! इसके बिना डीप लिंकिंग असंभव है। मुझे अभी भी यकीन नहीं है कि यदि आपको गहरी लिंकिंग की आवश्यकता है, तो विशेष रूप से कुछ क्लाउड / पासा के वातावरण में, जिसे आप httpd कॉन्फिग में आसानी से नहीं पा सकते हैं।
पियरे हेनरी

39

सरल और संक्षिप्त दिखने वाले उत्तर लिखें

Router में अंत में html5Mode (true) जोड़ें ;

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

Html head में आधार टैग जोड़ें

<html>
<head>
    <meta charset="utf-8">    
    <base href="/">
</head>

उपरोक्त उत्तर के विवरण के लिए @plus को धन्यवाद


मैं यह काम करने में सक्षम नहीं हूं। मैंने अपने विशिष्ट विवरणों के साथ एक नया प्रश्न पोस्ट किया है: stackoverflow.com/questions/36041074/… कृपया इसे देखें और यदि आप मदद कर सकते हैं तो मैं इसकी बहुत सराहना करूंगा।
लैरी मार्टेल


12

निम्नलिखित जानकारी इस प्रकार है:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

साफ URL प्राप्त करना और कोणीय में URL से हैशटैग को हटाना बहुत आसान है।
डिफ़ॉल्ट रूप से, AngularJS उदाहरण के लिए हैशटैग के साथ URL रूट करेगा:

2 चीजें हैं जिन्हें करने की आवश्यकता है।

  • $ ठिकाना कॉन्फ़िगर करना

  • रिश्तेदार लिंक के लिए हमारा आधार निर्धारित करना

  • $ स्थान सेवा

कोणीय में, $ लोकेशन सेवा एड्रेस बार में URL को पार्स करती है और आपके एप्लिकेशन में बदलाव करती है और इसके विपरीत।

मैं अत्यधिक उच्च सेवा के लिए सरकारी कोणीय $ लोकेशन डॉक्स के माध्यम से पढ़ने की सलाह दूंगा कि वह क्या सेवा प्रदान करता है।

https://docs.angularjs.org/api/ng/service/$location

$ लोकप्रूडर और html5Mode

  • हम $ locationProvider मॉड्यूल का उपयोग करेंगे और html5Mode को सही पर सेट करेंगे।
  • आपके कोणीय अनुप्रयोग को परिभाषित करने और आपके मार्गों को कॉन्फ़िगर करने पर हम ऐसा करेंगे।

    angular.module('noHash', [])
    
    .config(function($routeProvider, $locationProvider) {
    
       $routeProvider
           .when('/', {
               templateUrl : 'partials/home.html',
               controller : mainController
           })
           .when('/about', {
               templateUrl : 'partials/about.html',
               controller : mainController
           })
           .when('/contact', {
               templateUrl : 'partials/contact.html',
               controller : mainController
           });
    
       // use the HTML5 History API
       $locationProvider.html5Mode(true); });

HTML5 इतिहास एपीआई क्या है? यह एक स्क्रिप्ट का उपयोग करके ब्राउज़र इतिहास में हेरफेर करने के लिए एक मानकीकृत तरीका है। यह एंगुलर पेज को रिफ्रेश किए बिना हमारे पेज के रूटिंग और URL को बदलने की सुविधा देता है। इस बारे में अधिक जानकारी के लिए, यहाँ एक अच्छा HTML5 इतिहास एपीआई अनुच्छेद है:

http://diveintohtml5.info/history.html

रिश्तेदार लिंक के लिए सेटिंग

  • रिश्तेदार लिंक का उपयोग करके अपने एप्लिकेशन को लिंक करने के लिए, आपको अपने दस्तावेज़ <base>में सेट करना होगा <head>। यह आपके Angular app की root index.html फ़ाइल में हो सकता है। <base>टैग ढूंढें , और इसे उस रूट URL पर सेट करें जिसे आप अपने ऐप के लिए चाहते हैं।

उदाहरण के लिए: <base href="https://stackoverflow.com/">

  • इसे कॉन्फ़िगर करने के कई अन्य तरीके हैं, और सच करने के लिए सेट किए गए HTML5 मोड को स्वचालित रूप से सापेक्ष लिंक को हल करना चाहिए। यदि आपके आवेदन की जड़ url (उदाहरण के लिए / मेरे आधार) से भिन्न है, तो उसे अपने आधार के रूप में उपयोग करें।

पुराने ब्राउज़रों के लिए वापसी

  • एचटीएमएल 5 इतिहास एपीआई का समर्थन नहीं करने वाले ब्राउज़रों के लिए $ स्थान सेवा स्वचालित रूप से हैशबैंग पद्धति में वापस आ जाएगी।
  • यह पारदर्शी रूप से आपके साथ होता है और आपको इसके लिए कुछ भी कॉन्फ़िगर नहीं करना पड़ेगा। कोणीय $ स्थान डॉक्स से, आप फ़ॉलबैक विधि और यह कैसे काम करता है, देख सकते हैं।

निष्कर्ष के तौर पर

  • यह सुंदर यूआरएल प्राप्त करने और अपने कोणीय अनुप्रयोग में हैशटैग को हटाने का एक सरल तरीका है। मज़ा उन सुपर साफ और सुपर फास्ट कोणीय क्षुधा बनाने!

3

यदि आप इसे ओएस एक्स 10.8 पर स्थानीय रूप से अपाचे के साथ कोणीय परोसने के लिए कॉन्फ़िगर करना चाहते हैं तो आपको निम्नलिखित .htaccent फ़ाइल मदद मिल सकती है:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

विकल्प + FollowSymlinks यदि सेट नहीं है तो आपको लॉग्स में निषिद्ध त्रुटि दे सकते हैं:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

रिवाइराइट बेस की आवश्यकता है अन्यथा आपके सर्वर रूट के लिए अनुरोधों को हल किया जाएगा जो कि स्थानीय रूप से डिफ़ॉल्ट रूप से आपकी परियोजना निर्देशिका नहीं है जब तक कि आपने विशेष रूप से अपने vhosts को कॉन्फ़िगर नहीं किया है, इसलिए आपको पथ सेट करने की आवश्यकता है ताकि अनुरोध आपके प्रोजेक्ट रूट निर्देशिका को ढूंढ सके। मेरी मशीन पर उदाहरण के लिए मेरे पास एक / उपयोगकर्ता / मुझे / साइट निर्देशिका है जहाँ मैं अपनी सभी परियोजनाएँ रखता हूँ। पुराने ओएस एक्स की तरह सेट अप करें।

अगली दो पंक्तियाँ प्रभावी रूप से कहती हैं कि यदि पथ कोई निर्देशिका या फ़ाइल नहीं है, तो आपको यह सुनिश्चित करने की आवश्यकता है कि आपके पास कोई रास्ता नहीं है या आपके ऐप मार्ग पथ के समान निर्देशिकाएं नहीं हैं।

अगली शर्त यह कहती है कि यदि फ़ाइल एक्सटेंशन के साथ अनुरोध समाप्त नहीं होता है, तो आपको वहां जो कुछ भी चाहिए उसे जोड़ें

और [एल] पिछले एक को index.html फ़ाइल की सेवा करने के लिए कह रहा है - अन्य सभी अनुरोधों के लिए आपका ऐप।

यदि आपको अभी भी समस्या है, तो अपाचे लॉग की जांच करें, यह संभवतः आपको उपयोगी संकेत देगा:

/private/var/log/apache2/error_log

यदि आप अपने स्थानीयहोस्ट एप सर्वर के रूप में MAMP का उपयोग करते हैं, तो सुनिश्चित करें कि पहला RewriteBase एक सापेक्ष लिंक है। उदाहरण के लिए RewriteBase / angularjs_site_folder /
डेविड डगलस

3

HTML5 मोड का उपयोग करने के लिए सर्वर की ओर URL पुनर्लेखन की आवश्यकता होती है, मूल रूप से आपको अपने सभी लिंक को अपने आवेदन के प्रवेश बिंदु पर फिर से लिखना होगा (जैसे अनुक्रमणिका)। आवश्यकता है<base>इस मामले के लिए टैग भी महत्वपूर्ण है, क्योंकि यह एंगुलरजेएस को यूआरएल के उस हिस्से के बीच अंतर करने की अनुमति देता है जो कि आवेदन का आधार है और जिस मार्ग को एप्लिकेशन द्वारा नियंत्रित किया जाना चाहिए। अधिक जानकारी के लिए, AngularJS डेवलपर गाइड - $ स्थान का उपयोग करके HTML5 मोड सर्वर साइड देखें


अपडेट करें

कैसे करें: HTML5Mode 1 के साथ काम करने के लिए अपने सर्वर को कॉन्फ़िगर करें

जब आप html5Mode को सक्षम कर लेते हैं, तो #वर्ण आपके url में उपयोग नहीं किया जाएगा। #क्योंकि इसमें कोई सर्वर साइड विन्यास की आवश्यकता है प्रतीक उपयोगी है। के बिना# , url बहुत अच्छे लगते हैं, लेकिन इसके लिए सर्वर साइड रीराइट की भी आवश्यकता होती है। यहाँ कुछ उदाहरण हैं:

अपाचे रिवाइट्स

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

नग्नेक्स रिवाइट्स

server {
    server_name my-app;

    index index.html;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

एज़्योर आईआईएस रिवाइराइट्स

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

एक्सप्रेस रिवाइट्स

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

यह सभी देखें


1

कोणीय 6 में, अपने राउटर के साथ आप उपयोग कर सकते हैं:

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

0

आप मुख्य पृष्ठ (होम) पर पुनर्निर्देशित करने के लिए नीचे दिए गए कोड का भी उपयोग कर सकते हैं:

{ path: '', redirectTo: 'home', pathMatch: 'full'}

ऊपर के रूप में अपने रीडायरेक्ट को निर्दिष्ट करने के बाद, आप अन्य पृष्ठों को पुनर्निर्देशित कर सकते हैं, उदाहरण के लिए:

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}

0

**

यह कोणीय में स्थान रणनीति के रूप में HTML 5 शैली (PathLocationStrategy) का उपयोग करने के लिए अनुशंसित है

** क्योंकि

  1. यह स्वच्छ और एसईओ फ्रेंडली URL का निर्माण करता है जो उपयोगकर्ताओं को समझने और याद रखने में आसान होते हैं।
  2. आप सर्वर-साइड रेंडरिंग का लाभ उठा सकते हैं, जो क्लाइंट को डिलीवर करने से पहले सर्वर में पेजों को रेंडर करके हमारे एप्लीकेशन को तेजी से लोड करेगा।

Hashlocationstrtegy का उपयोग केवल तभी करें जब आपको पुराने ब्राउज़रों का समर्थन करना हो।

अधिक जानकारी के लिए यहां क्लिक करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.