任何 SPA 框架的路由系統都是一樣的：每一個路由對應著應用程式的狀態，而應用程式狀態的變化體現在 URLs 的變化上；反之也是，URLs 的變化將會引起路由系統動態的重新整理應用程式的狀態。

在你的例子，路由的入口只有恆定的一個 ui-view='content'，但卻要不同的檢視（c.html 和 d.html）動態的進入其中，這就意味著 c.html 和 d.html 要對應應用程式的不同狀態，路由系統才可以據此而動態的更新。

假設你的例子是這樣的：

• 當 /posts/show/c 的時候，ui-view='content' 顯示 c.html

• 當 /posts/show/d 的時候，ui-view='content'

   顯示 d.html

於是我們才可以對應到 ui-router 裡面：

• state 是 posts.show

• 動態片段，即 URLs 中可變的部分，對應 state 裡的 url，我把它命名為 :name

• view 的入口是 [email protected]

這樣便足以寫出絕大部分程式碼了：

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            '
 
[email protected]': {
                templateUrl: /* TODO */,
                controller: ...
            }
        }
    });

});

唯一剩下的問題是：當 :name 變化的時候，如何更新 templateUrl？

之前說過的，URLs 的變化會引發路由系統更新應用程式的狀態，這些變化在路由系統中被儲存在 $params 物件中，我們可以用該物件提取變化的部分並生成正確的 templateUrl。在這裡我寫一個助手函式來做這件事情：

angular.module('YourApp'
 
).config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            '[email protected]': {
                templateUrl: getTemplateUrl,
                controller: ...
            }
        }
    });

    function getTemplateUrl() {
        return: 'templates/posts/' + $params.name + '.html';
    }

});

ui-router 這個模組，templateUrl 不只是接收字串，也可以接收函式的返回值。於是你可以得到：

• 當 /posts/show/c 的時候，templateUrl 是 templates/posts/c.html

• 當 /posts/show/d 的時候，templateUrl 是 templates/posts/d.html

相應的，在你 index 裡的導航連結就要負責切換 /posts/show/:name 的變化，如何生成對應動態片段的連結在 ui-router 的文件裡有，自己去找來看吧。