简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - 单页应用的页面title大家都是怎么处理的
漂亮男人
漂亮男人 2017-05-15 16:57:53
0
3
563

现在越来越多的网站都在使用spa技术，前端自己路由，局部刷新页面，来实现的单页应用也就webapp，相比较之前的整站都是独立的页面，每个页面都有单独的html来写上<title>你是猴子派来的逗比么</title>，那单页应用大家是怎么处理页面title问题的了

漂亮男人
漂亮男人

répondre à tous(3)
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-15 16:59:53 3 plancher

J'ai vu une réponse sur stackoverflow, il l'a implémentée comme ça

  • Ajoutez d'abord un contrôleur global au HTML : 

    <html ng-app="plunker" ng-controller="MainCtrl">

  • Puis j'ai écrit une usine : 

    app.factory('Page', function(){
      var title = 'default';
      return {
        title: function() { return title; },
        setTitle: function(newTitle) { title = newTitle; }
      };
    });

  • Ensuite index.html vous pouvez obtenir le titre de la page via <h1>{{ Page.title() }}</h1> sur la page principale

  • Il est très simple de définir le titre de la page spécifique correspondante. Il suffit d'injecter ceci Page dans votre contrôleur

    • . 
    function Page2Ctrl($scope, Page) {
      Page.setTitle('title1');
    }

Voici l'implémentation spécifique : http://plnkr.co/edit/0e7T6l?p=info

Comme +0
Ajouter une réponse
给我你的怀抱
给我你的怀抱2017-05-15 16:59:53 2 plancher

Utilisez

dans jsdocument.title = '...' pour modifier title

Si vous souhaitez de meilleurs résultats, vous pouvez utiliser la nouvelle fonctionnalité H5 de history.pushState(state, title, url) Cette méthode peut non seulement modifier title, mais également modifier l'adresse url en même temps, et enregistrer ces informations. dans la pile d'historique. Les utilisateurs bénéficieront d'une meilleure expérience lorsqu'ils utiliseront le bouton Précédent de leur navigateur.

Comme +0
Ajouter une réponse
習慣沉默
習慣沉默2017-05-15 16:59:53 1 plancher 
<title>{{mainAppCtrl.title}}</title>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！