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
• 路由的核心是给应用定义“状态”
• 使用路由机制会影响到应用的总体编码方式（须要预先定义好状态）
• 考虑兼容性问题与“优雅降级”