搜尋

首頁  >  問答  >  主體

angular.js - 單頁應用程式的頁面title大家都是怎麼處理的

現在越來越多的網站都在使用spa技術,前端自己路由,局部刷新頁面,來實現的單頁應用也就webapp,相比較之前的整站都是獨立的頁面,每個頁面都有單獨的html來寫上你是猴子派來的逗比麼,那單頁應用大家是怎麼處理頁面title問題的了

漂亮男人漂亮男人2742 天前597

全部回覆(3)我來回復

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新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

    回覆
    0
  • 给我你的怀抱

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

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

    如果想要效果更好,可以使用 H5 的新特性 history.pushState(state, title, url) ,这个方法不但能修改 title ,还能同时修改 url 位址,並將這些資訊記錄到歷史堆疊中,當使用者使用瀏覽器的返回按鈕時會得到更佳的體驗。

    回覆
    0
  • 習慣沉默

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

    雷雷

    回覆
    0
  • 取消回覆