angular設置title

Javascript框架在處理seo方面存在問題，由於爬蟲在檢索seo信息的時候會讀不了js給其賦的值，致使搜索引擎收錄不了或者收錄了無效的信息,好比收錄的多是title={{title}}這樣的，下面先說如何在路由跳轉時修改頁面的seo信息，如今spa跳轉通常用route-ui了，就以這個爲基礎講解，在app.js配置項state中加入title信息，以下：data:{ pageTitle:'user title'}

    .state('index.user', {
        url: '/user',
        views: {
           'content@index': {
               templateUrl: 'templateHtml/user/user.html',
               controller: 'userCtrl'
           }
        },
        data:{
            pageTitle:'user title'
        }
    })
    .state('index.user.a', {
        url: '/a',
        templateUrl: 'templateHtml/user/a.html',
        data:{
            pageTitle:'user a title'
        }
    })
    .state('index.user.b', {
        url: '/b',
        templateUrl: 'templateHtml/user/b.html',
        data:{
            pageTitle:'user b title'
        }
    })

而後使用經過監聽$stateChangeSuccess來修改頁面title:

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

                var listener = function(event, toState) {
                    console.log(toState);
                    $timeout(function() {
                        $rootScope.title = (toState.data && toState.data.pageTitle)
                            ? toState.data.pageTitle
                            : 'Default title';
                        $rootScope.metakeywords="this is keywords"
                    });
                };
                
                $rootScope.$on('$stateChangeSuccess', listener);
            }
        };
    }
]);

這裏賦值是經過獲取當前state中設置的title，也就是這裏toState對象的值，當咱們打印這個toState時就會發現：

這裏是獲取的已經設置好的data中pageTitle的值，若是不想寫在state裏或者寫死，能夠傳state中的惟一標示，配合後臺接口，將查詢的title渲染到頁面；一樣meta標籤如keywords、description能夠在此時一同綁定；

上面說到javascript框架在seo方面存在短板，應對ng的這個問題市面上也有不少方案,好比prerender，seo.js等，思想都是在頁面加入標示，讓爬蟲在頁面渲染好後纔去扒數據，同時服務器上要配置些服務，服務將檢測是否有對應這個URL的快照或者緩存的頁面，若是存在就發給爬蟲，如 果不存在，則生成快照，而後發送正確的頁面給爬蟲；處理起來仍是要費些功夫的，因此也能夠採用ng+常規的開發模式，一些重要的頁面不要用這種頁面渲染seo的方式，或者創建專門的seo信息頁；因此在這方面感受用ng框架作app（ionic）仍是很合適的；

 

　　原文地址：angular設置title，薛陳磊 | Share the world