অ্যাঙ্গুলারজেএস ইউআরএলগুলি থেকে # টুকরা শনাক্তকরণ সরানো হচ্ছে (# প্রতীক)

Question

কৌণিক.জেএস ইউআরএল থেকে # প্রতীক সরানো কি সম্ভব?

আমি যখন ভিউ পরিবর্তন করি এবং প্যারামগুলি সহ ইউআরএল আপডেট করব তখন আমি ব্রাউজারের পিছনের বোতাম ইত্যাদি ব্যবহার করতে সক্ষম হতে চাই, তবে আমি # চিহ্নটি চাই না।

টিউটোরিয়াল রুটপ্রভাইডার নীচে ঘোষণা করা হয়েছে:

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

আমি কি এটি # ছাড়া একই কার্যকারিতা পেতে সম্পাদনা করতে পারি?

Comments

হ্যাশট্যাগ চমৎকার এক

— BoJack অশ্বারোহী

stackoverflow.com/questions/14319967/...

— Ravimallya

আমার জন্য এখানে সমস্ত উত্তর ভুল। আমরা url "পুনর্লিখন" করতে পারি এবং # টি সরিয়ে ফেলতে পারি, তবে # ছাড়া কখনও ওয়েবপৃষ্ঠায় সরাসরি প্রবেশ করতে পারি না। এখানে কোন বাস্তব সমাধান ???

— আমদেব

আপনি যদি কৌনিক 1.6 ব্যবহার করেন তবে সমাধানটি এখানে ।

— মিস্তালিস

Answer 1

হ্যাঁ, আপনার কনফিগার করে $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);

  }]);

Comments

কারণ আইটি এলটি 10 এইচটিএমএল 5 ইতিহাসের এপিআই সমর্থন করে না যা সেটআপের মাধ্যমে সক্ষম করা হয়েছিল html5Mode(true)। আইইতে আপনাকে #রুটে ব্যবহার করতে হবে ।

— ম্যাক্সিম গ্রেচ

@ পাউটাটাক IE lt 10মানে ইন্টারনেট এক্সপ্লোরার এর চেয়ে কম সংস্করণ 10

— ম্যাক্সিম গ্র্যাচ

আপনি কি এটি সেট করতে পারেন যাতে এই আই-তে # ব্যবহারের ফলব্যাক? এটা শুধু মোড়কে হিসাবে সহজ হিসাবে $locationProvider.html5Mode(true);মধ্যে if !(IE lt 10)?

— অ্যান্ডি হেডেন

সুতরাং এই সমাধানটি ইউআরএল প্রদত্ত হ্যাশট্যাগটি হ'ল ইউআরএলটিতে একটি হ্যাশট্যাগ রয়েছে, তবে হ্যাশট্যাগটিকে প্রথম স্থানে অন্তর্ভুক্ত করতে চায় না এমন অনুরোধগুলির প্রতিক্রিয়া কীভাবে তা সমাধান করবে না। তবে, এটি ব্লা / # / ফোনগুলি -> ব্লাহ / ফোনগুলি সমাধান করে তবে এটি ব্লা / ফোনগুলি সরাসরি পরিচালনা করে না ।

— লুক

আমার সূচি html <হেড> বিভাগে <বেস href = "/" /> স্থাপন করা দরকার।

— nyxz

Answer 2

এইচটিএমএল 5 ইতিহাস এপিআই এর জন্য ব্রাউজার সমর্থন পরীক্ষা করে নেওয়ার বিষয়টি নিশ্চিত করুন:

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

Comments

এটি মন্তব্য হিসাবে আরও উপযুক্ত হতে পারে কারণ এটি সরাসরি প্রশ্নের উত্তর দেয় না।

— ব্র্যান্ডস্ক্রিপ্ট

বিকাশকারী গাইড অনুসারে , এই শনাক্তকরণটি স্বয়ংক্রিয়ভাবে সম্পন্ন হবে:If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically

— ইয়ানবি ২

মনোমুগ্ধকর মতো কাজ করেছে এবং আমি ব্রাউজার সংস্করণ চেকিংয়ের পরিবর্তে পদ্ধতি পরীক্ষার প্রশংসা করি - ভবিষ্যতের প্রমাণ।

— শেন

Answer 3

চমত্কার ইউআরএল এবং হ্যাশ ট্যাগটি মুছে ফেলার জন্য আপনার কোডটি মিনিফিকেশনের পরে কাজ করার জন্য আপনাকে নীচের উদাহরণের মতো আপনার কোডটি গঠন করতে হবে:

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

Comments

জন্য requireBase: false+1 টি

— whoan

হ্যালো @ ডিজিটালিমিট, $locationProvider.html5Modeকোড যুক্ত করার পরে আমার কোড $urlRouterProvider.otherwise('/home');কাজ করা বন্ধ করে দিয়েছে।

— জয়করত

Answer 4

আমি $locationProvider.html5Mode(true)সেট করার পরে ওয়েব কন্টিগিগ এ একটি নিয়ম লিখি 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>

আমার সূচক html এ আমি এটিতে যুক্ত করেছি <head>

<base href="/">

সার্ভারে iis এর জন্য url পুনরায় লেখক ইনস্টল করতে ভুলবেন না।

এছাড়াও আপনি যদি ওয়েব অপি এবং আইআইএস ব্যবহার করেন তবে এই ম্যাচের url কার্যকর হবে না, কারণ এটি আপনার এপিআই কলগুলিকে পরিবর্তন করবে will সুতরাং তৃতীয় ইনপুট যুক্ত করুন (শর্তের তৃতীয় লাইন) এবং এমন একটি প্যাটার্ন দিন যা কলগুলি বাদ দেবেwww.yourdomain.com/api

Comments

আপনি কীভাবে আইআইএস-এর জন্য ইউআরএল পুনরায় লেখক ইনস্টল করবেন? আমি আজুরে হোস্টিং করছি।

— প্রভু

Answer 5

আপনি যদি এনগুলারজেএস-এর সাথে এমভিসির সাথে নেট নেট স্ট্যাক করেন তবে ইউআরএল থেকে '#' অপসারণ করতে আপনাকে যা করতে হবে তা হ'ল:

1. আপনার লেআউট পৃষ্ঠায় আপনার বেস href সেট আপ করুন: <head> <base href="https://stackoverflow.com/"> </head>

2. তারপরে, আপনার কৌনিক অ্যাপ্লিকেশন কনফিগারেশনে নিম্নলিখিতগুলি যুক্ত করুন: $locationProvider.html5Mode(true)

3. উপরে ইউআরএল থেকে '#' মুছে ফেলা হবে তবে পৃষ্ঠা রিফ্রেশ কাজ করবে না যেমন আপনি যদি "thyite.com/about" এর মধ্যে থাকেন তবে পৃষ্ঠা পুনঃনির্মাণ আপনাকে একটি 404 দেবে This এটি কারণ এমভিসি কৌণিক রাউটিং এবং এমভিসি প্যাটার্ন দ্বারা এটি জানে না এমভিসি রাউটিং পাথের অস্তিত্ব নেই এমন 'সম্পর্কে' এর জন্য একটি এমভিসি পৃষ্ঠা সন্ধান করবে। এটির কার্যকারিতা হ'ল সমস্ত এমভিসি পৃষ্ঠার অনুরোধটি একটি একক এমভিসি ভিউতে প্রেরণ করা এবং আপনি যে রুটটিকে সমস্ত ক্যাচ করে তা যোগ করে এটি করতে পারেন

URL:

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

Comments

আমার কোন ফাইলটি রুটগুলি যুক্ত করা উচিত?

— Vicheanak

ফোল্ডারের App_Start অধীনে RouteConfig.cs তার

— Maksood

Answer 6

আপনি এইচটিএমএল 5 মডটি টুইট করতে পারেন তবে এটি কেবলমাত্র আপনার পৃষ্ঠার এইচটিএমএল অ্যাঙ্কারগুলিতে অন্তর্ভুক্ত লিঙ্কগুলির জন্য কার্যকর এবং ব্রাউজারের অ্যাড্রেস বারে ইউআরএল দেখতে কেমন লাগে function পৃষ্ঠার বাইরের যে কোনও জায়গা থেকে হ্যাশট্যাগ ছাড়াই (এইচটিএমএল 5 মডেলের সাথে বা ছাড়াই) একটি সাবপেজ অনুরোধ করার চেষ্টা করার ফলে 404 ত্রুটি হবে। উদাহরণস্বরূপ, নিম্নলিখিত সিআরএল অনুরোধের ফলে এইচটিএমএল 5 মডেল নির্বিশেষে কোনও পৃষ্ঠায় ত্রুটি পাওয়া যায়নি ফলাফল:

$ curl http://foo.bar/phones

যদিও নিম্নলিখিতটি মূল / হোম পৃষ্ঠাটি ফিরিয়ে দেবে:

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

এর কারণ হ'ল হ্যাশট্যাগের পরে সার্ভারে অনুরোধ পৌঁছানোর আগেই যেকোন কিছু বন্ধ হয়ে যায়। সুতরাং অনুরোধ http://foo.bar/#/portfolioহিসাবে সার্ভারে একটি অনুরোধ অনুরোধ হিসাবে উপস্থিত হয় http://foo.bar। সার্ভার একটি 200 ওকে প্রতিক্রিয়া (সম্ভবত) সাথে প্রতিক্রিয়া জানাবে http://foo.barএবং এজেন্ট / ক্লায়েন্ট বাকীটি প্রক্রিয়া করবে।

সুতরাং আপনি অন্যদের সাথে একটি url ভাগ করতে চান এমন ক্ষেত্রে হ্যাশট্যাগটি অন্তর্ভুক্ত করা ছাড়া আপনার কাছে বিকল্প নেই no

Comments

এই কাছাকাছি কোন উপায় আছে? এটি একটি খুব বড় সমস্যা।

— ব্যবহারকারী 441521

Answer 7

২ টি পদক্ষেপ অনুসরণ করুন-
১. প্রথমে আপনার অ্যাপ্লিকেশন কনফিগারেশনের ফাইলটিতে $ লোকেশনপ্রাইডার এইচটিএমএল 5 মডেল (সত্য) সেট করুন।
যেমন -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2. সেকেন্ড আপনার মূল পৃষ্ঠার ভিতরে <বেস> সেট করে ।
যেমন ->
<base href="https://stackoverflow.com/">

$ অবস্থান পরিষেবাটি ব্রাউজারগুলির জন্য হ্যাশ-পার্ট পদ্ধতিতে স্বয়ংক্রিয়ভাবে ফ্যালব্যাক হবে যা এইচটিএমএল 5 ইতিহাস এপিআই সমর্থন করে না।

Answer 8

আমার সমাধানটি .htaccess তৈরি এবং # সোরিয়ান কোড ব্যবহার করা হয় .. .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]

Answer 9

ডকুমেন্টেশন অনুযায়ী। তুমি ব্যবহার করতে পার:

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

এনবি: যদি আপনার ব্রাউজারটি এইচটিএমএল 5 সমর্থন করে না তবে চিন্তা করবেন না: ডি এর হ্যাশবাং মোডে ফ্যালব্যাক রয়েছে। সুতরাং, আপনাকে if(window.history && window.history.pushState){ ... }ম্যানুয়ালি পরীক্ষা করার দরকার নেই

উদাহরণস্বরূপ: আপনি যদি ক্লিক করেন: <a href="https://stackoverflow.com/other">Some URL</a>

এইচটিএমএল 5 ব্রাউজারে : কৌণিকটি স্বয়ংক্রিয়ভাবে পুনঃনির্দেশিত হবেexample.com/other

এইচটিএমএল 5 ব্রাউজারে নয় : কৌণিকটি স্বয়ংক্রিয়ভাবে পুনঃনির্দেশিত হবেexample.com/#!/other

Answer 10

এই উত্তরটি ধরে নিয়েছে যে আপনি বিপরীত প্রক্সি হিসাবে nginx ব্যবহার করছেন এবং আপনি ইতিমধ্যে P লোকেশনপ্রোভাডার html5 মডেলটিকে সত্য হিসাবে সেট করেছেন।

-> এমন লোকদের জন্য যারা উপরে থাকা সমস্ত দুর্দান্ত জিনিস নিয়ে এখনও লড়াই করে যাচ্ছেন।

অবশ্যই, @ ম্যাক্সিম গ্র্যাচ সলিউশনটি দুর্দান্ত কাজ করে, তবে কীভাবে হ্যাশট্যাগটি করা যেতে পারে না এমন অনুরোধগুলির প্রতিক্রিয়া জানাতে হবে তার সমাধানের জন্য পিএইচপি 404 প্রেরণ করছে কিনা তা পরীক্ষা করে দেখুন এবং ইউআরএলটি পুনরায় লিখতে হবে। নীচে এনজিনেক্সের কোড দেওয়া হল,

পিএইচপি অবস্থানের মধ্যে, 404 পিএইচপি ত্রুটি সনাক্ত করুন এবং অন্য কোনও জায়গায় পুনর্নির্দেশ করুন,

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

তারপরে পুনর্নির্দেশের স্থানে ইউআরএল পুনর্লিখন করুন এবং ডেটা, অফকোর্স, প্রক্সি_পাসকে আমার ওয়েবসাইটের ইউআরএলটি আমার ব্লগের ইউআরএল জায়গায় রাখুন। (অনুরোধ: আপনি চেষ্টা করার পরেই এটি প্রশ্ন করুন)

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

এবং যাদু দেখুন।

এবং এটি অবশ্যই আমার জন্য কমপক্ষে কাজ করে।

Comments

এটি কোথায় যুক্ত করবেন?

— ভোল্টিল

উপরের কোডটি কোথায় যুক্ত করবেন? এগুলিকে মূল এনগিনেক্স কনফিগারেশন ফাইলে রাখুন।

— সতীস

Answer 11

সব index.html অপসারণ থেকে শুরু #থেকে <a href="#/aboutus">About Us</a>তাই এটি দেখতে কেমন হবে <a href="https://stackoverflow.com/aboutus">About Us</a>index.html লেখার প্রধান ট্যাগে .Now <base href="https://stackoverflow.com/">মাত্র গত পর মেটা ট্যাগটি ।

এখন আপনার রাউটিংয়ে জেএস ইনজেক্ট করুন $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

Comments

সমস্ত # ইউরাল অপসারণ করা সহায়তা করেছে কারণ আমি # ইউআরএল অপসারণ না করে এটি পরীক্ষা করে দেখছিলাম।

— optimistanoop

Answer 12

অনুমান করুন এটি এর জন্য বাস্তবে দেরি হয়ে গেছে। তবে অ্যাপ্লিকেশনটিতে নীচের কনফিগারেশন যুক্ত করা হয়েছে ule

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

Answer 13

পদক্ষেপ 1: অ্যাপ্লিকেশন কনফিগারারের কনস্ট্রাক্টরে $ লোকেশনপ্রোভাডার পরিষেবাটি ইনজেক্ট করুন

পদক্ষেপ 2: অ্যাপ্লিকেশন কনফিগারারের কনস্ট্রাক্টরে কোড লাইন $ লোকেশনপ্রোভাডার html5 মডেল (সত্য) যুক্ত করুন।

পদক্ষেপ 3: পাত্রে (অবতরণ, মাস্টার বা লেআউট) পৃষ্ঠাতে, ট্যাগের <base href="https://stackoverflow.com/">অভ্যন্তরে এইচটিএমএল ট্যাগ যুক্ত করুন ।

পদক্ষেপ 4: সমস্ত অ্যাঙ্কর ট্যাগ থেকে রাউটিং কনফিগারেশনের জন্য সমস্ত '# "সরান examples উদাহরণস্বরূপ, 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>

Answer 14

শুধু $locationProviderইন যোগ করুন

.config(function ($routeProvider,$locationProvider)

এবং তারপর যোগ $locationProvider.hashPrefix(''); পর

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

এটাই.