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
• 路由的核心是給應用定義「狀態」
• 使用路由機制會影響到應用的總體編碼方式（須要預先定義好狀態）
• 考慮兼容性問題與「優雅降級」