AngularJS 路由詳解和簡(jiǎn)單實(shí)例

更新時(shí)間：2016年07月28日 15:59:21 投稿：lqh

本文主要介紹AngularJS 路由,這里整理了相關(guān)資料進(jìn)行詳細(xì)介紹,并附實(shí)例代碼和實(shí)現(xiàn)效果圖,有需要的小伙伴可以參考下

AngularJS 路由

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

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

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

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

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

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

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

接下來(lái)我們來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：

<html>
  <head>
  	<meta charset="utf-8">
    <title>AngularJS 路由實(shí)例 - 菜鳥(niǎo)教程</title>
  </head>
  <body ng-app='routingDemoApp'>
   
    <h2>AngularJS 路由應(yīng)用</h2>
    <ul>
      <li><a href="#/">首頁(yè)</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"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script>
      angular.module('routingDemoApp',['ngRoute'])
      .config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/',{template:'這是首頁(yè)頁(yè)面'})
        .when('/computers',{template:'這是電腦分類頁(yè)面'})
        .when('/printers',{template:'這是打印機(jī)頁(yè)面'})
        .otherwise({redirectTo:'/'});
      }]);
    </script>
   
   
  </body>
</html>

運(yùn)行結(jié)果：

AngularJS 路由應(yīng)用

首頁(yè)
電腦
打印機(jī)
其他

這是首頁(yè)頁(yè)面

實(shí)例解析：

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

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

angular.module('routingDemoApp',['ngRoute'])

3、使用 ngView 指令。

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

配置 $routeProvider，AngularJS $routeProvider 用來(lái)定義路由規(guī)則。

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

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

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

第一個(gè)參數(shù)是 URL 或者 URL 正則規(guī)則。

第二個(gè)參數(shù)是路由配置對(duì)象。

路由設(shè)置對(duì)象

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

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

路由配置對(duì)象語(yǔ)法規(guī)則如下：

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

參數(shù)說(shuō)明：

template:

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

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

templateUrl:

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

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

以上代碼會(huì)從服務(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"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></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>

運(yùn)行結(jié)果：

Home About

Home

以上就是對(duì)AngularJS 路由的資料整理，希望能幫助AngularJS 編程的同學(xué)。

您可能感興趣的文章: