angular设置页面路由及seo问题

意义:用路由进行切换时,不用再发起HTTP请求

以指令形式设置的页面路由

directive.js页面:

angular.module('SharePlatform.directive', [])
    .directive('communityNav', function () {
        return {
            restrict: 'E',
            templateUrl: './component/communityNav.html',
            replace: true
        }
    })
html页面:
<community-nav></community-nav>

全局配置的路由

angular.module('Platform', ['ngSanitize','ngRoute'])
    .config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider){
        $routeProvider
            .when('/',
                {templateUrl: 'home/home.html'}
            )
            .when('/login',
                {templateUrl: 'login/login.html'}
            )
            .otherwise({redirectTo:'/'});
            $locationProvider.html5Mode(true).hashPrefix('!');
    }]);;

html页面:

<div ng-view class="main-wrapper"></div>

其中需要注意的是SEO问题,前后端分离页面的路由一般都是放在前端的,用hashBang的方式控制路由,但是这会出现一种情况页面无法被搜索引擎抓取,一般的做法就是在服务器加一个可以渲染出静态页面的中间件,类似于phantomjs,zimbile.js,只要发现是搜索引擎的蜘蛛来爬的话就返回静态页面。而Prerender.io就一个现成的工具。

angular配置$locationProvider.html5Mode(true).hashPrefix('!'),具体参考网址:http://qkxue.net/info/60413/Prerender-angular-SEO

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值