意义:用路由进行切换时,不用再发起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