Heim  >  Fragen und Antworten  >  Hauptteil

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

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

漂亮男人漂亮男人2693 Tage vor562

Antworte allen(3)Ich werde antworten

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 16:59:53

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

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

        <html ng-app="plunker" ng-controller="MainCtrl">
    • 接着写了一个factory:

        app.factory('Page', function(){
          var title = 'default';
          return {
            title: function() { return title; },
            setTitle: function(newTitle) { title = newTitle; }
          };
        });
    • 然后index.html主页面中就可以通过<h1>{{ Page.title() }}</h1>获取页面标题了

    • 具体对应的那个页面要设置标题就很简单了,只要把这个Page注入到你的controller里面就可以了

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

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

    Antwort
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-15 16:59:53

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

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

    Antwort
    0
  • 習慣沉默

    習慣沉默2017-05-15 16:59:53

    <title>{{mainAppCtrl.title}}</title>

    Antwort
    0
  • StornierenAntwort