angular.js - 单页应用的页面title大家都是怎么处理的

Question

现在越来越多的网站都在使用spa技术，前端自己路由，局部刷新页面，来实现的单页应用也就webapp，相比较之前的整站都是独立的页面，每个页面都有单独的html来写上&lt;title&gt;你是猴子派来的逗比么&lt;/title&gt...

曾经蜡笔没有小新 · Answer

在stackoverflow上面看到一个答案，他是这样实现的

先在html上面加了一个全局的controller：

接着写了一个factory：

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

然后index.html主页面中就可以通过
{{ Page.title() }}
获取页面标题了
具体对应的那个页面要设置标题就很简单了，只要把这个Page注入到你的controller里面就可以了

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

这里是具体的实现：http://plnkr.co/edit/0e7T6l?p=info

给我你的怀抱 · Answer

js 中使用 document.title = '...' 就能修改 title 了

如果想要效果更好，可以使用 H5 的新特性 history.pushState(state, title, url) ，这个方法不但能修改 title ，还能同时修改 url 地址，并将这些信息记录到历史堆栈中，当用户使用浏览器的返回按钮时会得到更佳的体验。

習慣沉默 · Answer

{{mainAppCtrl.title}}

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial