2-7 路由

2-7 路由

内容简介

• 为什么要使用路由？

• AngularJS有哪几种路由？

• 前端路由的基本原理

---

1. 为什么要使用路由？

为什么前端需要个路由的机制？大概在2005年的时候兴起了ajax技术。有了ajax技术后，我们在向后台提交数据就可以通过该技术进行页面无刷新方式进行服务器的通信。当然这个技术也有一些缺陷。

1. 不会在浏览器地址栏中留下历史记录。（有人会想，没有历史记录挺好的啊。可是这如果在后台管理系统中没有历史记录也没有什么大的影响。但是如果是网络应用或门户网站这种的话就不好。用户就没有办法把此页面进行书签收藏或分享给他的小伙们啦）
2. 用户无法直接通过url地址进入应用中的指定页面（保存书签、链接分享给朋友）。
3. ajax对seo是个灾难。

2. AngularJS有哪几种路由？

• ngRoute（angularJS自带路由）

从angularJS1.2以上版本中，要使用ngRoute需要我们在从下引用angular-ui-router库文件。

如下代码写法：

var bookStoreApp = angular.module('bookStoreApp', [
  'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
  'bookStoreServices', 'bookStoreDirectives'
]);

bookStoreApp.config(function($routeProvider) {
  $routeProvider.when('/hello', {
    templateUrl: 'src/tpls/hello.html',
    controller: 'HelloCtrl'
  }).when('/list', {
    templateUrl: 'src/tpls/bookList.html',
    controller: 'BookListCtrl'
  }).otherwise({
    redirectTo: '/hello'
  })
});

缺点：只能实现单层级路由，不能深层次嵌套。

• angular-ui-router（第三方库）

3. 前端路由的基本原理

• 哈希

• html5中新的history API
• 路由的核心是给应用定义“状态”
• 使用路由机制会影响到应用的整体编码方式（需要预先定义好状态）
• 考虑兼容性问题与“优雅降级”