179

আমি এই ছাপে ছিলাম যে অ্যাঙ্গুলার টেম্পলেটগুলির মধ্যে অ্যাঙ্কর ট্যাগগুলির href বৈশিষ্ট্যে উপস্থিত URL গুলি পুনরায় লিখবে, যেমন তারা এইচটিএমএল 5 মোড বা হ্যাশবাং মোডে কাজ করবে work অবস্থান পরিষেবা ডকুমেন্টেশন বলতে চাই যে এইচটিএমএল লিংক rewriting hashbang অবস্থা যত্ন নেয় বলে মনে হয়। আমি এইভাবে প্রত্যাশা করব যে যখন এইচটিএমএল 5 মোডে নয়, হ্যাশগুলি beোকানো হবে এবং HTML5 মোডে থাকবে না।

তবে, মনে হয় কোনও পুনর্লিখনই হচ্ছে না। নিম্নলিখিত উদাহরণটি আমাকে কেবল মোড পরিবর্তন করতে দেয় না। অ্যাপ্লিকেশনটির সমস্ত লিঙ্কগুলি হাতে লিখে পুনরায় লিখতে হবে (বা রানটাইমের সময় কোনও ভেরিয়েবল থেকে প্রাপ্ত।) মোডের উপর নির্ভর করে আমাকে সমস্ত ইউআরএল নিজেই লিখতে হবে?

আমি কোনও ক্লায়েন্ট-সাইড url পুনরায় লেখার জন্য কৌণিক 1.0.6, 1.1.4 বা 1.1.3 এ চলছে দেখতে পাচ্ছি না। দেখে মনে হচ্ছে যে সমস্ত href মানগুলি # / hashbang মোডের জন্য এবং / html5 মোডের জন্য চাপানো দরকার।

পুনর্লিখনের জন্য কিছু কনফিগারেশন প্রয়োজন? আমি কি দস্তাবেজগুলি ভুলভাবে লিখছি? নির্বোধ কিছু করছে?

এখানে একটি ছোট উদাহরণ:

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>

<body>
    <div ng-view></div>
    <script>
        angular.module('sample', [])
            .config(
        ['$routeProvider', '$locationProvider',
            function ($routeProvider, $locationProvider) {

                //commenting out this line (switching to hashbang mode) breaks the app
                //-- unless # is added to the templates
                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    template: 'this is home. go to <a href="https://stackoverflow.com/about"/>about</a>'
                });
                $routeProvider.when('/about', {
                    template: 'this is about. go to <a href="https://stackoverflow.com/"/>home</a'
                });
            }
        ])
            .run();
    </script>
</body>

সংযোজন: আমার প্রশ্নটি পুনরায় পড়ার সময়, আমি দেখতে পাচ্ছি যে আমি এবং পুনর্লিখনটি কী করতে চেয়েছিলাম সে সম্পর্কে অনেক পরিষ্কার ছাড়াই আমি "পুনর্লিখন" শব্দটি ব্যবহার করেছি। প্রশ্ন হল কিভাবে পেতে হয় কৌণিক URL গুলি পুনর্লিখন যখন এটি পাথ উপস্থাপনা এবং এটি দুটি মোড জুড়ে অবিশেষে জাতীয় কোডে পাথ ব্যাখ্যা পেতে কিভাবে। এটা না কিভাবে ওয়েব সার্ভার HTML5 এর সাথে সামঞ্জস্যপূর্ণ অনুরোধের rewriting করতে কারণ সম্পর্কে।

angularjs angular-routing

— laurelnaiad
সূত্র

1

এখানে সমাধান জন্য কৌণিক 1.6 ।

— মিস্টালিস

361

AngularJS রাউটিং সম্পর্কে ডকুমেন্টেশন খুব পরিষ্কার নয় clear এটি হ্যাশবাং এবং এইচটিএমএল 5 মোড সম্পর্কে কথা বলে। প্রকৃতপক্ষে, AngularJS রাউটিংটি তিনটি মোডে পরিচালনা করে:

হাশবাং মোড
এইচটিএমএল 5 মোড
এইচটিএমএল 5 মোডে হ্যাশবাং

প্রতিটি মোডের জন্য এ সম্পর্কিত স্থানীয় অবস্থান শ্রেণি (লোকেশনহ্যাশবাংআরল, অবস্থান ইউআরএল এবং অবস্থানহ্যাশবাংআইএনএইচটিএমএল 5 ইউআরএল) রয়েছে।

ইউআরএল পুনর্লিখনের অনুকরণ করার জন্য আপনাকে এইচটিএমএল 5 মডটি সত্যতে সেট করতে হবে এবং নীচের মতো if স্নিফার শ্রেণিটি সাজাইতে হবে:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});

আমি এখন এটি আরও বিস্তারিতভাবে ব্যাখ্যা করব:

হাশবাং মোড

কনফিগারেশন:

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
});
$locationProvider
  .html5Mode(false)
  .hashPrefix('!');

আপনি যখন আপনার এইচটিএমএল ফাইলগুলিতে হ্যাশ সহ ইউআরএলগুলি ব্যবহার করতে চান তখন এটি হয়

<a href="index.html#!/path">link</a>

ব্রাউজারে আপনাকে অবশ্যই নিম্নলিখিত লিঙ্কটি ব্যবহার করতে হবে: http://www.example.com/base/index.html#!/base/path

আপনি খাঁটি হাশবাং মোডে দেখতে পাচ্ছেন যে এইচটিএমএল ফাইলগুলির সমস্ত লিঙ্ক অবশ্যই "সূচক। Html #!" এর মতো ভিত্তি দিয়ে শুরু হওয়া উচিত।

এইচটিএমএল 5 মোড

কনফিগারেশন:

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

আপনার এইচটিএমএল-ফাইলে বেস স্থাপন করা উচিত

<html>
  <head>
    <base href="/">
  </head>
</html>

এই মোডে আপনি # টি এইচটিএমএল ফাইলগুলিতে লিঙ্কগুলি ব্যবহার করতে পারেন

<a href="/path">link</a>

ব্রাউজারে লিঙ্ক:

http://www.example.com/base/path

এইচটিএমএল 5 মোডে হ্যাশবাং

এই মোডটি সক্রিয় হয় যখন আমরা প্রকৃতপক্ষে HTML5 মোড ব্যবহার করি তবে একটি বেমানান ব্রাউজারে। আমরা $ স্নিফার পরিষেবাটি সাজিয়ে এবং ইতিহাসকে মিথ্যাতে সেট করে একটি সামঞ্জস্যপূর্ণ ব্রাউজারে এই মোডটি অনুকরণ করতে পারি।

কনফিগারেশন:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});
$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true)
  .hashPrefix('!');

এইচটিএমএল-ফাইলে বেস সেট করুন:

<html>
  <head>
    <base href="/">
  </head>
</html>

এই ক্ষেত্রে লিঙ্কগুলি এইচটিএমএল ফাইলে হ্যাশ ছাড়াও লেখা যেতে পারে

<a href="/path">link</a>

ব্রাউজারে লিঙ্ক:

http://www.example.com/index.html#!/base/path

— বৃহস্পতিগ্রহ
সূত্র

@ বৃহস্পতিবার বিস্তারিত ব্যাখ্যার জন্য আপনাকে ধন্যবাদ। আমি ঠাট্টা বাদ দিতে এবং হ্যাশটি আটকে রাখতে পারি এবং মোডের উপর নির্ভর করে দুটি সেট ইউআরএল প্রয়োজন হয় না বলে কৌতুককে কৌতুকপূর্ণ রাখতে পারি কিনা তা আমি খতিয়ে দেখব!

— লরেলনাইয়াদ

1

আমি মনে করি আপনার সমস্যাটি আমি সঠিকভাবে বুঝতে পারি নি। আপনি কেন হ্যাশ ছাড়াই কেবল ইউআরএল ব্যবহার করবেন না? তারা ইতিহাসের এপিআই সমর্থনকারী ব্রাউজারগুলিতে এবং ইতিহাসের এপিআই সমর্থন না করে ব্রাউজারগুলিতে কাজ করবে। অ্যাঙ্গুলারজেএস হ'ল সংস্করণটি অবস্থান বারে রাখবে যখন আপনি ব্রাউজারগুলিতে তাদের এ ক্লিক করেন তবে ইতিহাসের এপিআই সমর্থন না করে অ্যাঙ্গুলারজেএস লিঙ্কগুলিতে ক্লিক করে inter

— বৃহস্পতি

আমি এমন একটি ফ্রেমওয়ার্কে কাজ করছি যা উভয় মোডকে সমর্থন করবে। অ্যাপ লেখকদের তাদের টেম্পলেটগুলিতে হ্যাশ রয়েছে কিনা এবং / অথবা আপেক্ষিক পাথের ব্যাখ্যায় পরিবর্তন রয়েছে কিনা তা নিয়ে চিন্তা না করেই এক বা অন্যটিকে বেছে নিতে সক্ষম হওয়া উচিত। আমি আশাবাদী যে আপনার কৌশলটি এটি সত্য করে তুলতে সাহায্য করবে যে "আপনারা যা কিছু করেন তা মোড পরিবর্তন করে" (এমনকি যদি ব্যবহারিক সমাধানটি "HTML কে মোড সেট করে এবং তারপরে ব্রাউজারের ক্ষমতাগুলি সম্পর্কে কৌনিকের সাথে মিথ্যা থাকে")।

— লরেলনাইয়াদ

1

আমি কি $provideঅপরিশোধিত পেয়ে যাচ্ছি ?

— পেট্রুস থেরন

1

@ পেট - আপনি ডেকোরেটর সেট আপ করার সময় আপনার কনফিগারেশন ফাংশনটিতে আপনাকে ইনজেকশন দেওয়া দরকার।

— লরেলনাইয়াদ

8

ভবিষ্যতের পাঠকগণ, আপনি যদি কৌনিক 1.6 ব্যবহার করে থাকেন তবে আপনার আরও পরিবর্তন করতে হবে hashPrefix:

appModule.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('');
}]);

আপনার এইচটিএমএলে বেস সেট করতে ভুলবেন না <head>:

<head>
    <base href="/">
    ...
</head>

চেঞ্জলগ সম্পর্কে আরও তথ্য here।

— Mistalis
সূত্র

3

ধন্যবাদ @ মিস্টালিস আপনার উত্তর ভাল কাজ করছে। তবে ইস্যু করুন যখন আমি রাউটিংয়ের পরে পৃষ্ঠাটি রিফ্রেশ করি, পৃষ্ঠাটি পাওয়া যায় না ত্রুটি ঘটে। দয়া করে আমাকে সহায়তা করুন ..

— আশীষ মেহতা

@ আশিষমহতা হ্যালো আশীষ আমি আপনাকে এই উত্তরটি পড়ার পরামর্শ দিচ্ছি , এটি আপনার সমস্যাটি সমাধান করতে পারে। বিদায়! :)

— মিস্টালিস

0

এটি নির্ধারণ করতে আমার কিছুটা সময় লেগেছিল তাই আমি কীভাবে এটি কাজ করেছিলাম - এসিওর জন্য # ছাড়াই কৌণিক ওয়েবএপিআই এর এএসপি রাউটিং

সূচক html - বেস href = "/"> এ যুক্ত করুন
Add অবস্থানপ্রভাইডার। Html5 মডেল যুক্ত করুন (সত্য); to app.config
ছবি আপলোড করার জন্য আমার একটি নির্দিষ্ট নিয়ামক (যা হোম কন্ট্রোলারে ছিল) উপেক্ষা করার দরকার ছিল তাই আমি এই নিয়মটি রাউটকনফাইগে যুক্ত করেছি
```
     routes.MapRoute(
        name: "Default2",
        url: "Home/{*.}",
        defaults: new { controller = "Home", action = "SaveImage" }
    );
```

গ্লোবাল.এক্সএক্সে নিম্নলিখিতগুলি যুক্ত করুন - এপিআই এবং চিত্র আপলোডের পথগুলি উপেক্ষা করার বিষয়টি নিশ্চিত করে এগুলি স্বাভাবিক হিসাবে কাজ করতে দেয় অন্যথায় সমস্ত কিছু পুনরায় তৈরি করতে দেয়।

 private const string ROOT_DOCUMENT = "/Index.html";

protected void Application_BeginRequest(Object sender, EventArgs e)
{
    var path = Request.Url.AbsolutePath;
    var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
    var isImageUpload = path.StartsWith("/home", StringComparison.InvariantCultureIgnoreCase);

    if (isApi || isImageUpload)
        return;

    string url = Request.Url.LocalPath;
    if (!System.IO.File.Exists(Context.Server.MapPath(url)))
        Context.RewritePath(ROOT_DOCUMENT);
}

পুনঃনির্দেশের জন্য $ অবস্থান.url ('/ XXX') ব্যবহার করুন এবং উইন্ডো.লোকশন নয় ... তা নিশ্চিত করুন
সিএসএস ফাইলগুলি পরম পাথ সহ উল্লেখ করুন

এবং না

<link href="app/content/bootstrapwc.css" rel="stylesheet" />

চূড়ান্ত দ্রষ্টব্য - এটি করা আমাকে পুরো নিয়ন্ত্রণ দেয় এবং ওয়েব কনফিগারেশনে আমার কিছু করার দরকার পড়ে না।

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

— TFA
সূত্র

0

আমি আমার অ্যাপ্লিকেশনটি এইচটিএমএল 5 মোড এবং একটি নির্দিষ্ট টোকেন দিয়ে অ্যাক্সেস করতে সক্ষম হতে চাই এবং তারপরে হ্যাশব্যাং পদ্ধতিতে স্যুইচ করতে (টোকেনটি রাখতে যাতে ব্যবহারকারী তার পৃষ্ঠাটি রিফ্রেশ করতে পারে)।

আমার অ্যাপ্লিকেশন অ্যাক্সেসের জন্য URL:

http://myapp.com/amazing_url?token=super_token

তারপরে ব্যবহারকারী যখন পৃষ্ঠাটি লোড করবেন:

http://myapp.com/amazing_url?token=super_token#/amazing_url

তারপরে ব্যবহারকারী যখন নেভিগেট করে:

http://myapp.com/amazing_url?token=super_token#/another_url

এটির সাহায্যে আমি ইউআরএল-এ টোকেন রাখি এবং ব্যবহারকারী যখন ব্রাউজ করে তখন স্থিতি রাখি। আমি ইউআরএলটির কিছুটা দৃশ্যমানতা হারিয়েছি, তবে এটি করার কোনও সঠিক উপায় নেই।

সুতরাং এইচটিএমএল 5 মোড সক্ষম করবেন না এবং তারপরে এই নিয়ামকটি যুক্ত করুন:

.config ($stateProvider)->
    $stateProvider.state('home-loading', {
         url: '/',
         controller: 'homeController'
    })
.controller 'homeController', ($state, $location)->
    if window.location.pathname != '/'
        $location.url(window.location.pathname+window.location.search).replace()
    else
        $state.go('home', {}, { location: 'replace' })

— লুক বোয়াসে
সূত্র

/ অবস্থান / এইচটিএমএল 5 এবং হ্যাশবাং মোড / লিঙ্ক পুনর্লিখনের মধ্যে স্যুইচিং

হাশবাং মোড

এইচটিএমএল 5 মোড

এইচটিএমএল 5 মোডে হ্যাশবাং