angular學習筆記(十七)-路由和切換檢視

詩&遠方發表於2014-05-23
Angular筆記路由

本篇介紹angular中如何通過判斷url的hash值來顯示不同的檢視模板,並使用不同的控制器:

下面,通過一個例子,來一步一步說明它的用法:

我們要做一個郵箱應用,開啟的時候顯示的是郵件列表:

然後點選郵件主題,可以檢視該郵件的詳細內容:

點選返回列表,再回到列表頁

 

一. 建立index頁面:

<!DOCTYPE html>
<html>
<head>
  <title>14.1路由和檢視切換</title>
  <meta charset="utf-8">
  <script src="../../angular.js"></script>
  <script src="controller.js"></script>
  <link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div ng-app="A-Mail">
  <h3>A-Mail</h3>
  <br>
  <div ng-view></div>
</div>
</body>
</html>

這一步需要做的事情有:

①. 通過ng-app,使用某個模型來管理頁面

②. 通過ng-view,建立空的div,裡面的內容會根據url的hash值來呼叫不同的檢視模板,並且使用不同的控制器

③. 寫好公共的,始終被顯示的檢視部分,比如這裡的標題: <h3>A-Mail</h3>

 

二. 建立需要被呼叫的其它檢視, 也就會是放在ng-view中的檢視模板:

①list.html:

<table>
  <tr><th>發件人</th><th>主題</th><th>傳送時間</th></tr>
  <tr ng-repeat="message in messages">
    <td>{{message.sender}}</td><td><a href="#/view/{{message.id}}">{{message.subject}}</a></td><td>{{message.date}}</td>
  </tr>
</table>

當hash值為空的時候,ng-view中應該顯示的是郵件的列表.

注意,其中郵件的連結應該使用"#/..." 使用#開頭表示改變路徑的hash值

比如我輸入這個連結:

http://localhost:801/angular/OREILLY/14.1.路由和檢視切換/index.html

開啟後,它會自己變成:

http://localhost:801/angular/OREILLY/14.1.路由和檢視切換/index.html#/

如果跳轉到"#/view/001",

url就會變成: http://localhost:801/angular/OREILLY/14.1.路由和檢視切換/index.html#/view/001

 

②detail.html:

<p><b>主題:</b><span>{{message.subject}}</span></p>
<p><b>發件人:</b><span>{{message.sender}}</span></p>
<p><b>傳送時間:</b><span>{{message.date}}</span></p>
<h4>To:</h4>
<ul class="clear_float"><li ng-repeat="name in message.recipients">{{name}}; </li></ul>
<hr>
<div>{{message.content}}</div>
<a class="button" href="#/">返回列表</a>

當hash值為view/id的時候,顯示的應該是當前id的郵件詳細內容

返回列表按鈕返回到沒有hash值的路徑

 

三. 建立模組,路由,控制器:

var messages = [
    {
        "id":"001",
        "sender":"兔小寶",
        "subject":"給小寶買草",
        "date":"Dec 7, 2014 12:32:00",
        "recipients": ["小a","米米","小黑"],
        "content":"今天一定要給我買草啊!!!"
    },
    {
        "id":"002",
        "sender":"周孝剛",
        "subject":"給小寶加水",
        "date":"May 12, 2014 05:04:00",
        "recipients": ["兔兔","粥粥","小白"],
        "content":"今天一定要給小寶加水啊!!!"
    },
    {
        "id":"003",
        "sender":"code_bunny",
        "subject":"買涼蓆",
        "date":"Thu 14, 2014 04:14:00",
        "recipients": ["white_bunny","sb","小米"],
        "content":"今天一定要給買涼蓆啊!!!"
    }
];


var aMail = angular.module('A-Mail',[]);

aMail.controller('listControll',function($scope){
    $scope.messages = messages;
});
aMail.controller('detailControll',function($scope, $routeParams){
    var index = parseInt($routeParams.id)-1;
    $scope.message = messages[index];
});

aMail.config(function($routeProvider){
    $routeProvider.when('/',{controller:'listControll',templateUrl:'view/list.html'}).when('/view/:id',{controller:'detailControll',templateUrl:'view/detail.html'}).otherwise({redirectTo:'/'})
});

①.messages是虛擬的資料

②.建立該應用使用的模型

③.給該模型建立兩個控制器,分別用於控制郵件列表檢視和郵件詳細內容檢視

④.給該模型配置路由:

   aMail.config(function($routeProvider){

      $routeProvider.when('hash1',{controller:'someController1',templateUrl:'path/to/view1}).when('hash2',{controller:'someController2',templateUrl:'path/to/view2'})....when().otherwise({redirectTo:'/'})

   })

   config方法傳入一個函式,函式中傳入引數"$routeProvider"作為服務.

   $routeProvider.when(hash,obj)用於配置路由:

   　　hash: 字串格式. 匹配url的hash值,注意這裡不要#, '/' 就表示hash值為空.

   　　obj: 一個json物件,物件有以下這些屬性:

       　　  controller: '控制器'    : 字串格式,定義控制ng-view元素的控制器

         　　template: '檢視模板'  : 字串格式,定義ng-view元素下應該使用哪個檢視模板來填充內容,寫的是檢視模板的路徑

         　　redirectTo: '路徑'     : 字串格式,定義重定向到哪裡,注意定義的也是hash值

   $routeProvider.otherwise()用於當沒有匹配到任何路由的時候執行的內容:

         引數和when的第二個引數用法一致

 

⑤.$routeParams服務:

   關於服務的概念,可以參考這篇:http://www.cnblogs.com/liulangmao/p/3727808.html

   $routeParems可以獲取到一個引數化的url元件.這個元件比較複雜,單就這個例子來看,我們在配置路由的時候在when的url屬性傳入了/view/:id作為匹配,這樣,就會把'view/'後面的內容,作為$routeParems物件的id屬性值

 

 

 

 

 

 

 

 

 

 

 

相關文章