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