ইউআই-রাউটার ব্যবহার করে পৃষ্ঠার শিরোনাম সেট করুন

Question

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

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl : 'views/home.html',
        data : { pageTitle: 'Home' }

    })
    .state('about', {
        url: '/about',
        templateUrl : 'views/about.html',
        data : { pageTitle: 'About' }
    })
     });

পৃষ্ঠার শিরোনামকে গতিশীলভাবে সেট করতে আমি কীভাবে পৃষ্ঠাটাইটেল ভেরিয়েবলটি ব্যবহার করতে পারি? রাউটিং ইন বিল্ট ব্যবহার করে, আমি করতে পারি

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    $rootScope.pageTitle = $route.current.data.pageTitle;
  });

এবং তারপরে নীচের চিত্র অনুসারে ভেরিয়েবলকে বাঁধুন

<title ng-bind="$root.pageTitle"></title>

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

Comments

একটি $ stateChangeSuccess ইভেন্ট রয়েছে।

— জেরাদ

Answer 1

ব্যবহার $stateChangeSuccess।

আপনি এটি একটি নির্দেশিকাতে রাখতে পারেন:

app.directive('updateTitle', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function(scope, element) {

        var listener = function(event, toState) {

          var title = 'Default Title';
          if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;

          $timeout(function() {
            element.text(title);
          }, 0, false);
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

এবং:

<title update-title></title>

ডেমো: http://run.plnkr.co/8tqvzlCw62Tl7t4j/#/home

কোড: http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p= পূর্বরূপ

এমনকি সঙ্গে ইতিহাস সঠিক হতে প্রয়োজন হয়েছে, অন্তত যখন আমি নিজেকে পরীক্ষিত গেছেন।$stateChangeSuccess$timeout

---

সম্পাদনা করুন: নভেম্বর 24, 2014 - ঘোষণামূলক পদ্ধতির:

app.directive('title', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function() {

        var listener = function(event, toState) {

          $timeout(function() {
            $rootScope.title = (toState.data && toState.data.pageTitle) 
            ? toState.data.pageTitle 
            : 'Default title';
          });
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

এবং:

<title>{{title}}</title>

ডেমো: http://run.plnkr.co/d4s3qBikieq8egX7/#/credits

কোড: http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p= পূর্বরূপ

Comments

সুপার দুর্দান্ত। এটি কোনও সহজ পেতে পারে না

— ম্যাথু হারউড

এই উদাহরণটিও ইতিহাসের সাথে সঠিকভাবে কাজ করে না (কমপক্ষে ক্রোম 37 এ)। আপনি যদি বিভিন্ন রাজ্যের মধ্যে যান তবে আপনার ইতিহাসটি দেখুন, ইতিহাসের আইটেমের শিরোনামটি পূর্ববর্তী পৃষ্ঠার মান হবে। আপনি যদি পৃষ্ঠা 1 -> পেজ 2 -> পৃষ্ঠা 3 যান তবে ইতিহাস দেখুন, পৃষ্ঠা 2 এর url পৃষ্ঠা 1 এর শিরোনামের সাথে মিলবে।

— jkjustjoshing

আসলে, এটি বেশ নির্ভুল নয়। ইউআরএল হ্যাশ পরিবর্তনের আগে পৃষ্ঠার শিরোনাম পরিবর্তিত হয়, তাই ব্রাউজারটি মনে করে যে নতুন শিরোনামটি পুরানো পৃষ্ঠার জন্য। পিছনের বোতামের ইতিহাসটি তখন 1 পৃষ্ঠা বন্ধ। element.text(title)$ সময়সীমাতে কলটি মোড়ানো আমার পক্ষে কাজ করেছিল। মূল পোস্টটি সম্পাদনা করা হচ্ছে।

— jkjustjoshing

কিছু ইউআরএল প্যারামিটারের উপর ভিত্তি করে শিরোনামটি গতিশীল হওয়ার দরকার থাকলে এটি কাজ করবে না।

— কুশাগ্রা গুর

শিরোনামের প্রয়োজন এ $ stateParams ভিত্তিক গতিশীল হতে @KushagraGour থাকে, তাহলে আপনি একটি ফাংশন ব্যবহার করতে পারে resolveএটা জেনারেট করতে, তারপর অ্যাক্সেস $ সঙ্গে stateChangeSuccess ইভেন্টের সময় "সমাধান" মান: $state.$current.locals.resolve.$$values.NAME_OF_RESOLVE_FUNCTION।

— ক্লজ কনরাড

Answer 2

ইতিমধ্যে ইতিমধ্যে বেশিরভাগ উত্তর একত্রিত করে এটি করার আরও একটি উপায় রয়েছে। আমি জানি এটি ইতিমধ্যে উত্তর পেয়েছে তবে আমি ইউআই-রাউটার দিয়ে পৃষ্ঠা শিরোনাম পরিবর্তনশীলভাবে দেখাতে চেয়েছিলাম।

আপনি যদি ইউআই-রাউটার নমুনা অ্যাপ্লিকেশনটি একবার দেখে থাকেন তবে তারা $ স্টেট ভেরিয়েবলটি $ রুটস্কোপে যুক্ত করতে কৌণিক .রুন ব্লক ব্যবহার করে ।

// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.
// For example, <li ng-class="{ active: $state.includes('contacts.list') }"> 
// will set the <li> to active whenever 'contacts.list' or one of its 
// decendents is active.

.run([ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
}])

এই সংজ্ঞায়িত করে আপনি তারপরে সংজ্ঞায়িত রাষ্ট্রটি ব্যবহার করতে যা পোস্ট করেছেন তবে সংশোধন করেছেন তা দিয়ে সহজেই আপনার পৃষ্ঠার শিরোনাম আপডেট করতে পারেন:

একইভাবে রাষ্ট্র সেটআপ করুন:

.state('home', {
    url: '/home',
    templateUrl : 'views/home.html',
    data : { pageTitle: 'Home' }
})

তবে এইচটিএমএলটি কিছুটা সম্পাদনা করুন ...

<title ng-bind="$state.current.data.pageTitle"></title>

আমি এর আগে উত্তরগুলির চেয়ে ভাল এটি বলতে পারি না ... তবে বুঝতে এবং বাস্তবায়ন করা আমার পক্ষে সহজ ছিল। আশা করি এটি কাউকে সাহায্য করবে!

Comments

গৃহীত উত্তরের চেয়ে বেশি ঘোষণামূলক। আমি এই পছন্দ!

— এন্ডি তেজহোনো

যদি নিশ্চিত না আমি শুধু শিরোনামটি জন্য $ rootScope পুরো $ সুযোগ বস্তুর চাই ...

— জেসুস Carrera

আমি নিশ্চিত নই যেখানে $ স্কোপ অবজেক্টটি রেফার করা হচ্ছে @ জেসেসকারেরায়

— cwbutler

ওপস, দুঃখিত আমার অর্থ $ রাষ্ট্রীয় অবজেক্ট

— জেসেস কেরেরা

শুধু নিশ্চিত করতে github.com/angular-ui/ui-router/wiki/Quick-Reference এছাড়াও সেটিং বিশেষ পরামর্শ দেওয়া হচ্ছে $stateএবং $stateParamsউপর $rootScopeমধ্যে থেকে run।

— মার্ক পিটারসন

Answer 3

কৌণিক-ui এ-রাউটার-টাইটেল প্লাগইন এটা সহজ একটি পৃষ্ঠাটি শিরোনাম আপডেট করে তোলে স্ট্যাটিক বা গতিশীল বর্তমান অবস্থা উপর ভিত্তি করে মান। এটি ব্রাউজারের ইতিহাসের সাথেও সঠিকভাবে কাজ করে।

Comments

এটি এগিয়ে যাওয়ার সেরা সমাধান বলে মনে হচ্ছে। আমি এই পৃষ্ঠার অন্যান্য সমাধানগুলির কয়েকটি ব্যবহার করে ব্রাউজারের ইতিহাসের সাথে বেশ কয়েকটি অসঙ্গতি লক্ষ্য করেছি।

কৌণিক-ইউআই-রাউটার-শিরোনামটি সেরা সমাধান বলে মনে হচ্ছে। এর বেশিরভাগই ঝামেলা মুক্ত! ধন্যবাদ স্টেপান

— ডেরিও

এটি একটি খুব ক্ষুদ্র উত্স ফাইল।

— টাইলার কলিয়ার

Answer 4

$stateChangeSuccessএখন ইউআই-রাউটার ১.x এ অবমুক্ত এবং ডিফল্টরূপে অক্ষম করা হয়েছে। আপনার এখন নতুন $transitionপরিষেবাটি ব্যবহার করতে হবে ।

আপনি কীভাবে $transitionকাজ করেন তা একবার বুঝতে পারলে সমাধান খুব বেশি কঠিন নয় । এগুলি বোঝার জন্য আমি @ ট্রাইগের কাছ থেকে কিছু সহায়তা পেয়েছি । শিরোনাম আপডেট করার জন্য আমি এখানে কী নিয়ে এসেছি।

আপনার কৌণিক 1.6 অ্যাপ্লিকেশন এ এটি রাখুন। নোট করুন যে আমি ECMAScript 6 সিনট্যাক্স ব্যবহার করছি; আপনি যদি না হন তবে আপনার অবশ্যই উদাহরণ পরিবর্তন letকরতে হবে var।

.run(function($transitions, $window) {
    $transitions.onSuccess({}, (transition) => {
        let title = transition.to().title;
        if (title) {
            if (title instanceof Function) {
                title = title.call(transition.to(), transition.params());
            }
            $window.document.title = title;
        }
    });

তারপরে titleআপনার রাজ্যে কেবল একটি স্ট্রিং যুক্ত করুন :

$stateProvider.state({
    name: "foo",
    url: "/foo",
    template: "<foo-widget layout='row'/>",
    title: "Foo Page""
});

এটি "ফু পৃষ্ঠা" শব্দটি শিরোনামে প্রদর্শিত হবে। (যদি কোনও রাষ্ট্রের শিরোনাম না থাকে তবে পৃষ্ঠার শিরোনাম আপডেট করা হবে না above যদি কোনও রাষ্ট্র নির্দেশিত না করে তবে ডিফল্ট শিরোনাম সরবরাহ করতে উপরের কোডটি আপডেট করা সহজ জিনিস হবে))

কোড আপনাকে এর জন্য একটি ফাংশন ব্যবহার করার অনুমতি দেয় title। thisফাংশন কল করতে রাষ্ট্র নিজেই হতে হবে ব্যবহার করা হয়, এবং এক যুক্তি রাষ্ট্র প্যারামিটার, এই উদাহরণে মত হবে:

$stateProvider.state({
    name: "bar",
    url: "/bar/{code}",
    template: "<bar-widget code='{{code}}' layout='row'/>",
    title: function(params) {
        return `Bar Code ${params.code}`;
    }
});

URL /bar/code/123শিরোনাম হিসাবে যা পৃষ্ঠার শিরোনাম হিসাবে "বার কোড 123" দেখায়। মনে রাখবেন যে স্ট্রিংটি ফর্ম্যাট করতে এবং এক্সট্র্যাক্ট করতে আমি ECMAScript 6 সিনট্যাক্স ব্যবহার করছি params.code।

সময়টি ছিল এমন কেউ যদি নির্দেশের মধ্যে এমন কিছু রাখে এবং প্রত্যেকের ব্যবহারের জন্য প্রকাশ করে তবে এটি দুর্দান্ত।

Comments

dataকাস্টম কীগুলির জন্য অবজেক্টটি ব্যবহার করুন । ইন্টারফেসে titleবিদ্যমান নেই StateDeclaration।

— গৌই

Answer 5

অ্যাপের যে কোনও জায়গায় ব্যবহার করতে $ রাজ্যে $ রুটস্কোপ সংযুক্ত করা হচ্ছে।

app.run(['$rootScope', '$state', '$stateParams',
    function ($rootScope,   $state,   $stateParams) {

        // It's very handy to add references to $state and $stateParams to the $rootScope
        // so that you can access them from any scope within your applications.For example,
        // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
        // to active whenever 'contacts.list' or one of its decendents is active.
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }
  ]
)

<title ng-bind="$state.current.name + ' - ui-router'">about - ui-router</title>

Comments

প্রতিটি রাজ্যে শিরোনাম যুক্ত করার সাথে এটি একত্রিত। নিখুঁত কাজ করে।

— WCByrne

Answer 6

আমি এই উপায় সত্যিই সহজ পেয়েছি :

  .state('app.staff.client', {
    url: '/client/mine',
    title: 'My Clients'})

এবং তারপরে আমার এইচটিএমএলটিতে:

<h3>{{ $state.current.title }}</h3>

Answer 7

স্রেফ উইন্ডো ডকুমেন্ট.টাইটেল আপডেট করুন:

.state('login', {
   url: '/login',
   templateUrl: "/Login",
   controller: "loginCtrl",
   onEnter: function($window){$window.document.title = "App Login"; }
})

এইভাবে 'এনজি-অ্যাপ' টি এইচটিএমএল ট্যাগে উঠতে হবে না এবং এটি শরীরে বা নীচে থাকতে পারে।

Comments

কেন এই সেরা উত্তর হয় না? = /

— রেক্স

Answer 8

আমি এনজিমেটা ব্যবহার করছি , যা কেবল পৃষ্ঠার শিরোনামই নয় বরং বর্ণনার জন্যও ভাল কাজ করে। এটি আপনাকে প্রতিটি রাজ্যের জন্য একটি নির্দিষ্ট শিরোনাম / বিবরণ সেট করতে দেয়, যখন কোনও শিরোনাম / বিবরণ নির্দিষ্ট না করা হয় তেমনি ডিফল্ট শিরোনাম প্রত্যয় (যেমন, '| MySiteName') এবং লেখকের মান সেট করে।

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'views/home.html',
    controller: 'HomeController',
    meta: {
      'title': 'Home',
      'titleSuffix': ' | MySiteName',
      'description': 'This is my home page description lorem ipsum.'
    },
  })

Answer 9

আপনি আপনার প্রথম উত্তর / প্রশ্নের সাথে আসলেই খুব কাছাকাছি রয়েছেন। ডেটা অবজেক্ট হিসাবে আপনার শিরোনাম যুক্ত করুন:

.state('home', {
    url: '/home',
    templateUrl : 'views/home.html',
    data : { pageTitle: 'Home' }
})

আপনার ইনডেক্স.ইচটিএমএলে সরাসরি পৃষ্ঠার শিরোনামের সাথে ডেটা বাঁধুন:

<title data-ng-bind="$state.current.data.pageTitle + ' - Optional text'">Failsafe text</title>

Answer 10

আমি মার্টিন এবং টাসকেট-এর উত্তরের এই সংমিশ্রণটি দিয়ে শেষ করেছি - সহজ এবং কোনও টেম্পলেট সম্পর্কিত জিনিস ছাড়াই:

$rootScope.$on("$stateChangeSuccess", function (event, toState) {
   $timeout(function () { // Needed to ensure the title is changed *after* the url so that history entries are correct.
     $window.document.title = toState.name; 
   });
});

Comments

যদি কোনও টেম্পলেট সম্পর্কিত জিনিস না থাকে তবে কীভাবে কোনও নতুন দেব জানবেন যে কীভাবে এটি পরিবর্তন করা হচ্ছে তা জিজ্ঞাসা না করে শিরোনামটি কীভাবে পরিবর্তন করা হচ্ছে?

— ton.yeung

যদি আপনি $ window.docament.title use টাইমআউট ব্যবহার করেন তবে অকেজো। আমি

— hack

Answer 11

কেন শুধু না:

$window.document.title = 'Title';

আপডেট: সম্পূর্ণ দিকনির্দেশক কোড

var DIRECTIVE = 'yourPageTitle';

yourPageTitle.$inject = ['$window'];
function yourPageTitle($window: ng.IWindowService): ng.IDirective {

    return {
        link: (scope, element, attrs) => {

            attrs.$observe(DIRECTIVE, (value: string) => {

                $window.document.title = value;
            });
        }
    }
}

directive(DIRECTIVE, yourPageTitle);

তারপরে প্রতিটি পৃষ্ঠায় আপনি কেবল এই নির্দেশকে অন্তর্ভুক্ত করবেন:

<section
    your-page-title="{{'somePage' | translate}}">

Comments

কোড বেজ উত্তরাধিকার সূত্রে যে কেউ কেন / কীভাবে শিরোনাম পরিবর্তন করছে তা খুঁজে পাওয়া সম্ভাব্য পক্ষে খুব কঠিন হতে পারে

— ton.yeung

কেন এটি খুঁজে পাওয়া কঠিন হবে? এই স্নিপডকে একটি নির্দেশিকা থেকে ট্রিগার করা উচিত, আপনার পৃষ্ঠা-শিরোনাম = "{page 'পেজটাইজড' | অনুবাদ} say বলুন This এই নির্দেশিকাটি প্রতিটি পৃষ্ঠার প্রথম উপাদানটিতে অন্তর্ভুক্ত করা হবে N সুন্দর এবং ঘোষণাযুক্ত পরিষ্কার

— মার্টিন

ওহ, সম্পাদনা সহ, আমি এখন আপনি কি বলতে চাইছেন তা দেখতে পাচ্ছি। আমার অর্থ হ'ল যে একটি লাইনারটি সম্ভাব্য যে কোনও জায়গায় c রুটস্কোপ, নির্দেশিকা, ইত্যাদি রাখা যেতে পারে ...

— টন.ইয়েং

Answer 12

আপনি যদি ES6 ব্যবহার করছেন তবে এটি ঠিক কাজ করে :) :)

class PageTitle {
    constructor($compile, $timeout) {
        this.restrict = 'A';
        this._$compile = $compile;
        this.$timeout = $timeout;
    }

    compile(element) {
        return this.link.bind(this);
    }

    link(scope, element, attrs, controller) {
        let defaultTitle = attrs.pageTitle ? attrs.pageTitle : "My Awesome Sauce Site";
        let listener = function(event, toState) {
            let title = defaultTitle;
            if (toState.data && toState.data.title) title = toState.data.title + ' | ' + title;
            $('html head title').text(title);
        };
        scope.$on('$stateChangeStart', listener);
    }
}

export function directiveFactory($compile) {
    return new PageTitle($compile);
}

directiveFactory.injections = ['$compile', '$timeout'];

export default PageTitle;

Answer 13

সম্ভবত আপনি এই নির্দেশ চেষ্টা করতে পারেন।

https://github.com/afeiship/angular-dynamic-title

এখানে উদাহরণ:

এইচটিএমএল:

<title dynamic-title>Title</title>

<a href="javascript:;" ui-sref="state1">State1 page</a>
<a href="javascript:;" ui-sref="state2">State2 page</a>

জাভাস্ক্রিপ্ট:

var TestModule = angular.module('TestApp', ['ui.router','nx.widget'])
    .config(function ($stateProvider, $urlRouterProvider) {
      //
      // For any unmatched url, redirect to /state1
      $urlRouterProvider.otherwise("/state1");
      //
      // Now set up the states
      $stateProvider
        .state('state1', {
          url: "/state1",
          templateUrl: "partials/state1.html",
          data:{
            pageTitle:'State1 page title11111'
          }
        })
        .state('state2', {
          url: "/state2",
          templateUrl: "partials/state2.html",data:{
            pageTitle:'State2 page title222222'
          }
        });
    })
    .controller('MainCtrl', function ($scope) {
      console.log('initial ctrl!');
    });

Answer 14

আপডেট হওয়া ইউআই-রাউটার 1.0.0+ সংস্করণগুলির জন্য, ( https://ui-router.github.io/guide/ng1/migrate-to-1_0 )

নিম্নলিখিত কোড দেখুন

app.directive('pageTitle', [
    '$rootScope',
    '$timeout',
    '$transitions',
    function($rootScope, $timeout,$transitions) {
        return {
            restrict: 'A',
            link: function() {
                var listener = function($transitions) {
                    var default_title = "DEFAULT_TITLE";
                    $timeout(function() {
                        	$rootScope.page_title = ($transitions.$to().data && $transitions.$to().data.pageTitle)
                            ? default_title + ' - ' + $transitions.$to().data.pageTitle : default_title;
                    	
                        
                    });
                };
                $transitions.onSuccess({ }, listener);
            }
        }
    }
])

আপনার সূচক html এ নিম্নলিখিতগুলি যুক্ত করুন:

<title page-title ng-bind="page_title"></title>