বিঃদ্রঃ
যে $window.history.back()সমস্ত পরিবর্তনের ব্যবহারের পরামর্শ দেয় তার উত্তরগুলি এই প্রশ্নের একটি গুরুত্বপূর্ণ অংশকে হারিয়ে ফেলেছে: ইতিহাসের উত্থানের সাথে সাথে (পিছনে / এগিয়ে / রিফ্রেশ করুন) অ্যাপ্লিকেশনের অবস্থাটি কীভাবে সঠিক স্থিতিতে ফিরিয়ে আনতে হবে । সেটা মাথায় রেখে; দয়া করে, পড়ুন।
হ্যাঁ, ব্রাউজারটি ফিরে / ফরোয়ার্ড (ইতিহাস) পাওয়া এবং খাঁটি ui-routerস্টেট-মেশিন চালিত করে রিফ্রেশ করা সম্ভব তবে এতে কিছুটা সময় লাগে।
আপনার কয়েকটি উপাদান প্রয়োজন:
অনন্য ইউআরএল । আপনি url পরিবর্তন করার সময় ব্রাউজারটি কেবল পিছনে / ফরোয়ার্ড বোতামগুলিকে সক্ষম করে so এই ইউআরএলগুলিতে যদিও কোনও রাজ্যের তথ্য থাকা দরকার না।
একটি সেশন পরিষেবা । প্রতিটি উত্পন্ন ইউআরএল একটি নির্দিষ্ট রাজ্যের সাথে সম্পর্কিত হয় তাই আপনার ইউআরএল-রাষ্ট্র জোড়াগুলি সংরক্ষণ করার জন্য আপনার একটি উপায় প্রয়োজন যাতে আপনার কৌনিক অ্যাপটি ফিরে / ফরোয়ার্ড বা রিফ্রেশ ক্লিকগুলি পুনরায় চালু করার পরে আপনি রাষ্ট্রের তথ্য পুনরুদ্ধার করতে পারেন।
একটি রাষ্ট্র ইতিহাস । ইউআই-রাউটারের একটি সাধারণ অভিধান অনন্য ইউআরএল দ্বারা চালিত। আপনি যদি এইচটিএমএল 5 এর উপর নির্ভর করতে পারেন তবে আপনি এইচটিএমএল 5 ইতিহাস এপিআই ব্যবহার করতে পারেন , তবে যদি আমার মতো আপনিও কোড কোডের কয়েকটি লাইনে নিজেকে এটি প্রয়োগ করতে পারেন না (নীচে দেখুন)।
একটি অবস্থান পরিষেবা । অবশেষে, আপনার কোড দ্বারা অভ্যন্তরীণভাবে ট্রিগার হওয়া, এবং সাধারণ ব্রাউজারের ইউআরএল পরিবর্তনগুলি সাধারণত ব্রাউজার বোতামে ক্লিক করে বা ব্রাউজার বারে স্টাফ টাইপ করে ব্যবহারকারী দ্বারা চালিত সাধারণ ব্রাউজারের ইউআরএল পরিবর্তন করতে আপনাকে সক্ষম হতে হবে। এগুলি কিছুটা জটিল হয়ে উঠতে পারে কারণ কী কী ঘটায় তা নিয়ে বিভ্রান্ত হওয়া সহজ।
এই প্রয়োজনীয়তার প্রতিটি আমার বাস্তবায়ন এখানে। আমি তিনটি পরিষেবাতে সবকিছুকে বান্ডিল করেছি:
সেশন পরিষেবা
class SessionService
setStorage:(key, value) ->
json = if value is undefined then null else JSON.stringify value
sessionStorage.setItem key, json
getStorage:(key)->
JSON.parse sessionStorage.getItem key
clear: ->
@setStorage(key, null) for key of sessionStorage
stateHistory:(value=null) ->
@accessor 'stateHistory', value
accessor:(name, value)->
return @getStorage name unless value?
@setStorage name, value
angular
.module 'app.Services'
.service 'sessionService', SessionService
এটি জাভাস্ক্রিপ্ট sessionStorageঅবজেক্টের জন্য একটি মোড়ক । আমি এখানে স্পষ্টতার জন্য এটি কেটে ফেলেছি। এর সম্পূর্ণ ব্যাখ্যার জন্য দয়া করে দেখুন: আমি কীভাবে একটি AngularJS একক পৃষ্ঠা অ্যাপ্লিকেশন সহ পৃষ্ঠা সতেজ হ্যান্ডেল করব
রাজ্য ইতিহাস পরিষেবা
class StateHistoryService
@$inject:['sessionService']
constructor:(@sessionService) ->
set:(key, state)->
history = @sessionService.stateHistory() ? {}
history[key] = state
@sessionService.stateHistory history
get:(key)->
@sessionService.stateHistory()?[key]
angular
.module 'app.Services'
.service 'stateHistoryService', StateHistoryService
StateHistoryServiceস্টোরেজ ও উত্পন্ন, অনন্য URL- এর মাধ্যমে অস্থির ঐতিহাসিক রাজ্যের আহরণ পর সৌন্দর্য। অভিধানের স্টাইলের অবজেক্টের জন্য এটি কেবলমাত্র একটি সুবিধাযুক্ত মোড়ক।
রাজ্য অবস্থান পরিষেবা
class StateLocationService
preventCall:[]
@$inject:['$location','$state', 'stateHistoryService']
constructor:(@location, @state, @stateHistoryService) ->
locationChange: ->
return if @preventCall.pop('locationChange')?
entry = @stateHistoryService.get @location.url()
return unless entry?
@preventCall.push 'stateChange'
@state.go entry.name, entry.params, {location:false}
stateChange: ->
return if @preventCall.pop('stateChange')?
entry = {name: @state.current.name, params: @state.params}
url = "/#{@state.params.subscriptionUrl}/#{Math.guid().substr(0,8)}"
@stateHistoryService.set url, entry
@preventCall.push 'locationChange'
@location.url url
angular
.module 'app.Services'
.service 'stateLocationService', StateLocationService
StateLocationServiceদুটি ঘটনার হ্যান্ডলগুলি:
locationChange । ব্রাউজারগুলির অবস্থান পরিবর্তন করা হয়, সাধারণত যখন পিছনে / ফরোয়ার্ড / রিফ্রেশ বোতাম টিপানো হয় বা অ্যাপ্লিকেশনটি প্রথম শুরু করা হয় বা যখন কোনও ইউআরএল-এ টাইপ করা হয় তখন এটিকে বলা হয়। বর্তমান location.url জন্য অবস্থায় উপস্থিত থাকলে StateHistoryServiceতারপর এটি নামঃ ui-রাউটার এর মাধ্যমে রাষ্ট্র পুনঃস্থাপন করতে ব্যবহৃত হয় $state.go।
stateChange । আপনি যখন অভ্যন্তরীণভাবে রাষ্ট্রের দিকে চলে যান তখন এটিকে বলা হয়। বর্তমান রাষ্ট্রের নাম এবং প্যারামগুলি StateHistoryServiceউত্পন্ন url দ্বারা কী দ্বারা সংরক্ষণ করা হয় । এই উত্পন্ন ইউআরএল আপনি যা চান তা হতে পারে, এটি মানুষের পাঠযোগ্য উপায়ে রাষ্ট্রটিকে সনাক্ত করতে পারে বা নাও পারে। আমার ক্ষেত্রে আমি একটি স্টেট প্যারাম প্লাস এবং একটি গাইড থেকে প্রাপ্ত এলোমেলোভাবে অঙ্কিত অঙ্কের ক্রম ব্যবহার করছি (গাইড জেনারেটরের স্নিপেটের জন্য পাদদেশ দেখুন)। উত্পাদিত ইউআরএল ব্রাউজার বারে প্রদর্শিত হয় এবং গুরুত্বপূর্ণভাবে ব্রাউজারের অভ্যন্তরীণ ইতিহাসের স্ট্যাক ব্যবহার করে যুক্ত হয় @location.url url। এটি ব্রাউজারের ইতিহাস স্ট্যাকটিতে url যুক্ত করে যা সামনের / পিছনের বোতামগুলিকে সক্ষম করে।
এই কৌশল নিয়ে বড় সমস্যা যে কলিং হয় @location.url urlমধ্যে stateChangeপদ্ধতি আরম্ভ হবে $locationChangeSuccessইভেন্ট এবং তাই কল locationChangeপদ্ধতি। সমানভাবে কলিং @state.goথেকে locationChangeআরম্ভ হবে $stateChangeSuccessঘটনা এবং তাই stateChangeপদ্ধতি। এটি খুব বিভ্রান্তিকর হয়ে ওঠে এবং ব্রাউজারের ইতিহাসের শেষ নেই।
সমাধান খুব সহজ। আপনি preventCallঅ্যারেটিকে স্ট্যাক ( popএবং push) হিসাবে ব্যবহৃত হচ্ছে দেখতে পারেন । প্রতিবার যে কোনও একটি পদ্ধতিকে বলা হয় এটি অন্য পদ্ধতিটিকে কেবলমাত্র এককালীন বলা হচ্ছে তা প্রতিরোধ করে। এই কৌশলটি $ ইভেন্টগুলির সঠিক ট্রিগারটিতে বাধা দেয় না এবং সবকিছু সোজা রাখে।
এখন আমাদের যা করতে হবে তা হ'ল HistoryServiceরাষ্ট্রের রূপান্তর জীবন-চক্রের উপযুক্ত সময়ে পদ্ধতিগুলি কল করা । এটি AngularJS অ্যাপ্লিকেশন .runপদ্ধতিতে এইভাবে করা হয় :
কৌণিক অ্যাপ.আরুন
angular
.module 'app', ['ui.router']
.run ($rootScope, stateLocationService) ->
$rootScope.$on '$stateChangeSuccess', (event, toState, toParams) ->
stateLocationService.stateChange()
$rootScope.$on '$locationChangeSuccess', ->
stateLocationService.locationChange()
একটি গাইড জেনারেট করুন
Math.guid = ->
s4 = -> Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
"#{s4()}#{s4()}-#{s4()}-#{s4()}-#{s4()}-#{s4()}#{s4()}#{s4()}"
এই সব জায়গায়, ফরোয়ার্ড / পিছনে বোতাম এবং রিফ্রেশ বোতাম সমস্ত প্রত্যাশা অনুযায়ী কাজ করে।