Angularjs路由須要瞭解的那點事

時間 2019-11-06

原文原文鏈接

Angularjs路由須要瞭解的那點事javascript

咱們知道angularjs是特別適合單頁面應用，爲了經過單頁面完成複雜的業務功能，勢必須要可以從一個視圖跳轉到另一個視圖，也就是須要在單個頁面裏邊加載不一樣的模板。爲了完成這個功能angularjs爲咱們提供了路由服務($routeProvider)。html

先看下咱們的示例代碼，html框架頁index.html前端

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angularjs路由示例</title>
  

  <script src="../../../angular.min.js"></script>
  <script src="../../../angular-route.js"></script>
  <script src="script.js"></script>
  

  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>
<body ng-app="ngRouteExample">
  <div ng-controller="MainController">
  Choose:
  <a href="Book/Moby">Moby</a> |
  <a href="Book/Moby/ch/1">Moby: Ch1</a> |
  <a href="Book/Gatsby">Gatsby</a> |
  <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
  <a href="Book/Scarlet">Scarlet Letter</a><br/>

  <div ng-view></div>

  <hr />

  <pre>$location.path() = {{$location.path()}}</pre>
  <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
  <pre>$route.current.params = {{$route.current.params}}</pre>
  <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
  <pre>$routeParams = {{$routeParams}}</pre>
</div>
</body>
</html>

script.js文件的內容html5

(function(angular) {
  'use strict';
angular.module('ngRouteExample', ['ngRoute'])
 .controller('MainController', function($scope, $route, $routeParams, $location) {
     $scope.$route = $route;
     $scope.$location = $location;
     $scope.$routeParams = $routeParams;
    //  $scope.$on('$routeChangeSuccess', function(evt, next, previous) {
    //      debugger;
    //  });
 })

 .controller('BookController', function($scope, $routeParams) {
     $scope.name = "BookController";
     $scope.params = $routeParams;
    
 })

 .controller('ChapterController', function($scope, $routeParams) {
     $scope.name = "ChapterController";
     $scope.params = $routeParams;
     
 })

.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/Book/:bookId', {
    templateUrl: 'book.html',
    controller: 'BookController',
    resolve: {
      // I will cause a 1 second delay
      delay: function($q, $timeout) {
        var delay = $q.defer();
        $timeout(delay.resolve, 1000);
        return delay.promise;
      }
    }
  })
  .when('/Book/:bookId/ch/:chapterId', {
    templateUrl: 'chapter.html',
    controller: 'ChapterController'
  });

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});
})(window.angular);

book.htmljava

controller: {{name}}<br />
Book Id: {{params.bookId}}<br />

chapter.htmlangularjs

controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}

1、爲何是單頁應用promise

angularjs做爲前端mvc框架，其頁面中功能的切換勢必得在URL上有所體現，可是其又不能刷新頁面向服務器發送請求，由於每一個請求須要對應服務器端的一個頁面或者某個控制器的Action，也就是angularjs須要依賴服務器端的mvc框架，這樣angularjs做爲前端mvc框架就不那麼純粹了。瀏覽器

直接刷新angularjs的url，服務器找不到資源，具體效果以下服務器

那怎麼解決這個問題呢？這就須要服務器能夠將這個路由重定向到index.html頁面，並將/Book/Moby做爲url參數返回，而後在頁面中在路由到/Book/Moby便可。mvc

2、頁面初始化顯示某個特定模板

通常狀況下index.html是一個框架模板，不會包含具體的業務功能，具體頁面效果以下

咱們選中 Moby，在頁面中間顯示出來book.html的內容了，咱們能夠看到url地址已經變了，頁面的效果以下

實際的開發中，咱們每每不能只顯示框架頁index.html的內容，而是顯示上圖相似的效果，那咱們怎麼辦呢？其實咱們只須要頁面加載完直接將原來的url切換爲/Book/Moby便可，具體代碼

 .controller('MainController', function($scope, $route, $routeParams, $location) {

$scope.$route = $route;

$scope.$location = $location;

$scope.$routeParams = $routeParams;

// $scope.$on('$routeChangeSuccess', function(evt, next, previous) {

// debugger;

// });

//控制器執行完畢，路由到/Book/Moby

$location.path("/Book/Moby");

})

3、無刷新切換路由

其實仔細想一想，上邊切換url是須要依賴無刷新切換路由的，即url變了，加載了相應的模板，可是框架模板頁index.html卻沒有刷新。爲了實現這個功能，angularjs針對新舊瀏覽器提供了兩種方式，

針對老式瀏覽器可使用標籤模式，針對現代瀏覽器可使用HTML5模式。

前者在URL中使用#來防止頁面刷新，同時造成瀏覽器歷史記錄。具體形式以下

http://yoursite.com/#!/inbox/all

AngularJS支持的另一種路由模式是 html5 模式。在這個模式中,URL看起來和普通的URL

同樣(在老式瀏覽器中看起來仍是使用標籤的URL)。例如,一樣的路由在HTML5模式中看起來

是這樣的:

http://yoursite.com/inbox/all

在AngularJS內部, $location 服務經過HTML5歷史API讓應用可以使用普通的URL路徑來

路由。當瀏覽器不支持HTML5歷史API時, $location 服務會自動使用標籤模式的URL做爲替代

方案。