[AngularJS]AngularJS 入門教學 - ngRoute 與 ngView (二)

還記得上一篇使用了 #/edit 可以看到第一筆資料在輸入方塊中顯示嗎？但因為取資料的索引部份是我們寫在程式中的，這樣使用起來非常不方便。所以今天筆者要介紹一個算是場記 $route 的實用功能 $routeParams。

首先來看一個簡單的 hello.html：

1

<h3>Hi~{{ friends[0].name }}</h3>

然後搭配一個簡單的 $route 設定：

1
2
3

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

當使用者瀏覽到 #/hello 時就會看到預設的 "Hi~蒙其·D·魯夫" 的畫面：

不過筆者想要這個 "Hi~" 是由使用者透過網址所傳入的，網址格式希望是 #/hello/Hi，所以將 hello.html 稍微調整一下：

1

<h3>{{ greeting }}{{ friends[0].name }}</h3>

若使用者瀏覽時的網址是 #/hello/Hey 的話，那就 greeting 的值就是 Hey。但控制換場景是由 $route 來決定的，所以需要在設定時得指定好說會接到那些內容參數：

1
2
3
4

$routeProvider.when('/hello/:message', {
	templateUrl: 'hello.html',
	controller: 'GreetingCtrl'
});

首先看到 .when(path, route) 的第一個參數，現在改寫成 /hello/:message，這表示當使用者在瀏覽網頁時，若是 #/hello 開頭且後面若是再接一個參數時，像是 #/hello/ok 的話，這個 ok 就會被放到 $routeParams 物件的 messgae 變數中。所以若想要接受多個不同的參數的話，則要一一指定好才行。

而當我們在跟場記 $route說明換場景規則時，除了可以透過 templateUrl 屬性來設定模板檔案的位置之外，還可以再特別使用 controller 來說這個場景的控制器是誰唷！

所以再多建立一個 GreetingCtrl 控制器：

1
2
3

onePiece.controller('GreetingCtrl', function($scope, $routeParams){
	$scope.greeting = $routeParams.message;
})

因為我們需要接受從網址傳進來的其它參數，所以在建立 Controller 時得把專門用來存放跟換場景時有關的變數 $routeParams 也傳入才行。

好了~讓我們先來試一下若是使用 /hello/Hey~ 的話：

再改成 Yo,

那如果我們也想要改變問候的對像的話，也可以依所傳入的索引來取出相對應的角色喔！先改一下 hello.html：

1

<h3>{{ greeting }}{{ friends[index].name }}</h3>

然後再跟我們的場記說會再接受一個參數：

1
2
3
4

$routeProvider.when('/hello/:message/:index', {
	templateUrl: 'hello.html',
	controller: 'GreetingCtrl'
});

並在控制器中將接到的參數指定給 index 模型：

1
2
3
4

onePiece.controller('GreetingCtrl', function($scope, $routeParams){
	$scope.greeting = $routeParams.message;
	$scope.index = $routeParams.index;
})

好囉！若我們是使用 /hello/Hey~/1 的話：

再改成 /hello/Yo,/6 的話：

是不是很方便呢？

那麼請各位除了跟你喜歡的角色打招呼之外，將它改成 #/hello/:message/:index/:word，把你想說的其它話放在 word 中吧！