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



angular-routing (3)

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

আমার অ্যাপ্লিকেশন অ্যাক্সেস করার জন্য 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

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

তাই HTML5 মোড সক্ষম করবেন না এবং এই কন্ট্রোলারটি যোগ করুন:

.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' })

আমি ছাপার অধীনে ছিলাম যে অ্যাঙ্গুলারটি URL গুলিকে পুনঃলিখন করবে যা tempaltes এর মধ্যে অ্যাঙ্করের ট্যাগের href বৈশিষ্ট্যের মধ্যে উপস্থিত হবে, যেমন তারা HTML5 মোডে বা হ্যাশব্যাং মোডে কাজ করবে কিনা। অবস্থান পরিষেবাটির জন্য ডকুমেন্টেশন বলে মনে হয় যে HTML লিংক রিভিটিং হাশব্যাং পরিস্থিতির যত্ন নেয়। আমি এইভাবে আশা করি যে যখন HTML5 মোডে না, হ্যাশে ঢোকানো হবে এবং HTML5 মোডে, তারা তা করবে না।

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

আমি কোনও ক্লায়েন্ট-পার্শ্ব ইউআরএল পুনর্লিখন দেখতে যাচ্ছি না Angular 1.0.6, 1.1.4 বা 1.1.3 তে। মনে হচ্ছে যে সব href মানগুলি # / হ্যাশব্যাং মোড এবং / 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="/about"/>about</a>'
                });
                $routeProvider.when('/about', {
                    template: 'this is about. go to <a href="/"/>home</a'
                });
            }
        ])
            .run();
    </script>
</body>

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


Answer #1

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

  1. index.html - বেস href = "/"> যোগ করুন
  2. $ অবস্থান যোগ করুন Provider.html5 মোড (সত্য); app.config থেকে

  3. আমি একটি নির্দিষ্ট নিয়ামক (যা হোম কন্ট্রোলার ছিল) ইমেজ আপলোড করার জন্য উপেক্ষা করা প্রয়োজন তাই আমি RouteConfig যে নিয়ম যোগ করা প্রয়োজন

         routes.MapRoute(
            name: "Default2",
            url: "Home/{*.}",
            defaults: new { controller = "Home", action = "SaveImage" }
        );
  4. Global.asax এটিকে যোগ করুন - API এবং চিত্র আপলোড পাথগুলিকে উপেক্ষা করতে ভুলবেন না সেগুলিকে স্বাভাবিক হিসাবে কাজ করতে দেয় না অন্যথায় অন্য সব কিছু পুনর্বহাল করুন।

     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);
    }
  5. $ Location.url ('/ XXX') এবং window.location নয় ... পুনঃনির্দেশ করার জন্য নিশ্চিত করুন

  6. পরম পথ সঙ্গে সিএসএস ফাইল রেফারেন্স

এবং না

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

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

এই সাহায্য করার জন্য আমাকে একটু সময় হিসাবে এই সাহায্য করে আশা করি।


Answer #2

ফুয়ার ভবিষ্যত পাঠক, আপনি যদি Angular 1.6 ব্যবহার করেন তবে আপনাকে hashPrefix পরিবর্তন করতে hashPrefix :

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

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

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

here changelog সম্পর্কে আরও তথ্য।





angular-routing