重溫AngularJS（十三）-- 路由

weixin_34075551發表於2017-02-21
AngularJS路由

關聯目錄索引：
重溫AngularJS（一）-- 表示式、指令
重溫AngularJS（二）-- 模型ng-model指令
重溫AngularJS（三）-- Scope(作用域)
重溫AngularJS（四）-- 控制器ng-controller
重溫AngularJS（五）-- 過濾器
重溫AngularJS（六）-- 服務Service
重溫AngularJS（七）-- Select(選擇框)、表格
重溫AngularJS（八）-- 事件
重溫AngularJS（九）-- 模組、全域性API
重溫AngularJS（十）-- 表單、輸入驗證
重溫AngularJS（十一）-- 包含、動畫
重溫AngularJS（十二）-- 依賴注入（5個核心元件）
重溫AngularJS（十三）-- 路由

作者：Zyao89；轉載請保留此行，謝謝；

AngularJS 路由

本章節我們將為大家介紹 AngularJS 路由。
AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。
通過 AngularJS 可以實現多檢視的單頁Web應用（single page web application，SPA）。

通常我們的URL形式為 http://www.baidu.com/first/page，但在單頁Web應用中 AngularJS 通過 # + 標記 實現，例如：

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

當我們點選以上的任意一個連結時，向服務端請的地址都是一樣的 http://baidu.com/。 因為 # 號之後的內容在向服務端請求時會被瀏覽器忽略掉。 所以我們就需要在客戶端實現 # 號後面內容的功能實現。 AngularJS 路由 就通過 # + 標記 幫助我們區分不同的邏輯頁面並將不同的頁面繫結到對應的控制器上。

一個簡單的例項：

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS 路由例項</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由應用</h2>
        <ul>
            <li><a href="#/">首頁</a></li>
            <li><a href="#/computers">電腦</a></li>
            <li><a href="#/printers">印表機</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:'這是首頁頁面'})
                .when('/computers',{template:'這是電腦分類頁面'})
                .when('/printers',{template:'這是印表機頁面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
     
     
    </body>
</html>

分析：

  1. 載入了實現路由的 js 檔案：angular-route.js。

  2. 包含了 ngRoute 模組作為主應用模組的依賴模組。

angular.module('routingDemoApp',['ngRoute'])
  1. 使用 ngView 指令。
<div ng-view></div>

該 div 內的 HTML 內容會根據路由的變化而變化。

  1. 配置 $routeProvider，AngularJS $routeProvider 用來定義路由規則。
module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'這是首頁頁面'})
        .when('/computers',{template:'這是電腦分類頁面'})
        .when('/printers',{template:'這是印表機頁面'})
        .otherwise({redirectTo:'/'});
}]);

AngularJS 模組的 config 函式用於配置路由規則。通過使用 configAPI，我們請求把 $routeProvider 注入到我們的配置函式並且使用$routeProvider.whenAPI來定義我們的路由規則。

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

  • 第一個引數是 URL 或者 URL 正則規則。
  • 第二個引數是路由配置物件。

路由設定物件

AngularJS 路由也可以通過不同的模板來實現。
$routeProvider.when 函式的第一個引數是 URL 或者 URL 正則規則，第二個引數為路由配置物件。
路由配置物件語法規則如下：

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

引數說明：

  • template:
    如果我們只需要在 ng-view 中插入簡單的 HTML 內容，則使用該引數：
.when('/computers',{template:'這是電腦分類頁面'})
  • templateUrl:
    如果我們只需要在 ng-view 中插入 HTML 模板檔案，則使用該引數：
$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

以上程式碼會從服務端獲取 views/computers.html 檔案內容插入到 ng-view 中。

  • controller:
    function、string或陣列型別，在當前模板上執行的controller函式，生成新的scope。

  • controllerAs:
    string型別，為controller指定別名。

  • redirectTo:
    重定向的地址。

  • resolve:
    指定當前controller所依賴的其他模組。

栗子：

<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, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $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>

相關文章