AngularJS 路由

本章節(jié)我們將為大家介紹 AngularJS 路由。

AngularJS 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。

通過 AngularJS 可以實(shí)現(xiàn)多視圖的單頁Web應(yīng)用(single page web application,SPA)。

通常我們的URL形式為 http://w3cschool.cn/first/page,但在單頁Web應(yīng)用中 AngularJS 通過 # + 標(biāo)記 實(shí)現(xiàn),例如:

http://w3cschool.cn/#/first
http://w3cschool.cn/#/second
http://w3cschool.cn/#/third

當(dāng)我們點(diǎn)擊以上的任意一個鏈接時,向服務(wù)端請的地址都是一樣的 (http://w3cschool.cn/)。 因為 # 號之后的內(nèi)容在向服務(wù)端請求時會被瀏覽器忽略掉。 所以我們就需要在客戶端實(shí)現(xiàn) # 號后面內(nèi)容的功能實(shí)現(xiàn)。 AngularJS 路由 就通過 # + 標(biāo)記 幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應(yīng)的控制器上。


在以上圖形中,我們可以看到創(chuàng)建了兩個 URL: /ShowOrders 和 /AddNewOrder。每個 URL 都有對應(yīng)的視圖和控制器。

接下來我們來看一個簡單的實(shí)例:

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS 路由實(shí)例 - W3Cschool教程</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由應(yīng)用</h2>
        <ul>
            <li><a href="#/">首頁</a></li>
            <li><a href="#/computers">電腦</a></li>
            <li><a href="#/printers">打印機(jī)</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
         
        <div ng-view></div>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow"  rel="external nofollow" ></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js" rel="external nofollow"  rel="external nofollow" ></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'這是首頁頁面'})
                .when('/computers',{template:'這是電腦分類頁面'})
                .when('/printers',{template:'這是打印機(jī)頁面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>     
    </body>
</html>

嘗試一下 ?

實(shí)例解析:

  • 1、載入了實(shí)現(xiàn)路由的 js 文件:angular-route.js。

  • 2、包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊。

    angular.module('routingDemoApp',['ngRoute'])
    
  • 3、使用 ngView 指令。

    <div ng-view></div>

    該 div 內(nèi)的 HTML 內(nèi)容會根據(jù)路由的變化而變化。

  • 配置 $routeProvider,AngularJS $routeProvider 用來定義路由規(guī)則。

    module.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/',{template:'這是首頁頁面'})
            .when('/computers',{template:'這是電腦分類頁面'})
            .when('/printers',{template:'這是打印機(jī)頁面'})
            .otherwise({redirectTo:'/'});
    }]);
    

    AngularJS 模塊的 config 函數(shù)用于配置路由規(guī)則。通過使用 configAPI,我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。

    $routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數(shù)按順序定義所有路由,函數(shù)包含兩個參數(shù):

    • 第一個參數(shù)是 URL 或者 URL 正則規(guī)則。
    • 第二個參數(shù)是路由配置對象。

  • 路由設(shè)置對象

    AngularJS 路由也可以通過不同的模板來實(shí)現(xiàn)。

    $routeProvider.when 函數(shù)的第一個參數(shù)是 URL 或者 URL 正則規(guī)則,第二個參數(shù)為路由配置對象。

    路由配置對象語法規(guī)則如下:

    $routeProvider.when(url, {
        template: string,
        templateUrl: string,
        controller: string, function 或 array,
        controllerAs: string,
        redirectTo: string, function,
        resolve: object<key, function>
    });
    

    參數(shù)說明:

    • template:

      如果我們只需要在 ng-view 中插入簡單的 HTML 內(nèi)容,則使用該參數(shù):

      .when('/computers',{template:'這是電腦分類頁面'})
    • templateUrl:

      如果我們只需要在 ng-view 中插入 HTML 模板文件,則使用該參數(shù):

      $routeProvider.when('/computers', {
          templateUrl: 'views/computers.html',
      });
      

      以上代碼會從服務(wù)端獲取 views/computers.html 文件內(nèi)容插入到 ng-view 中。

    • controller:

      function、string或數(shù)組類型,在當(dāng)前模板上執(zhí)行的controller函數(shù),生成新的scope。

    • controllerAs:

      string類型,為controller指定別名。

    • redirectTo:

      重定向的地址。

    • resolve:

      指定當(dāng)前controller所依賴的其他模塊。

    • 實(shí)例

      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow"  rel="external nofollow" ></script>
      <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js" rel="external nofollow"  rel="external nofollow" ></script>
      
      <script type="text/javascript">
      angular.module('ngRouteExample', ['ngRoute'])
      .controller('HomeController', function ($scope) { $scope.$route = $route;})
      .controller('AboutController', function ($scope) { $scope.$route = $route;})
      .config(function ($routeProvider) {
          $routeProvider.
          when('/home', {
              templateUrl: 'embedded.home.html',
              controller: 'HomeController'
          }).
          when('/about', {
              templateUrl: 'embedded.about.html',
              controller: 'AboutController'
          }).
          otherwise({
              redirectTo: '/home'
          });
      });
      </script>
      
        
      </head>
      
      <body ng-app="ngRouteExample" class="ng-scope">
        <script type="text/ng-template" id="embedded.home.html">
            <h1> Home </h1>
        </script>
      
        <script type="text/ng-template" id="embedded.about.html">
            <h1> About </h1>
        </script>
      
        <div> 
          <div id="navigation">  
            <a href="#/home">Home</a>
            <a href="#/about">About</a>
          </div>
            
          <div ng-view="">
          </div>
        </div>
      </body>
      </html>
      

      嘗試一下 ?