ネストしたビューを表示する
続いてネストしたビューを持った画面を作成します。ネストした構造は少々、複雑になるためにパスとコンポーネントの関係を図3に示します。
このように、パスの構造を2つにすることで実現します。
HTMLテンプレートはitem.htmlの中にネストしたビューであるdetail.html を表示するようにします。
そのためにはリスト9のようにHTMLを作成します。
// router3/index.html の内容(抜粋)
<body ng-app="app">
<div ng-viewport style="padding: 10px; margin: 10px; border: 2px solid gray"></div>
</body>
// router3/item/item.htmlの内容
<h3>item.html</h3>
<div ng-viewport><!-- ここにdetailの内容を表示する --></div>
// router3/detail/detail.htmlの内容
<div style="margin: 10px; padding: 10px; border: 2px solid blue;">
<h5>detail.html</h5>
<div>
<p>本文・・・・・</p>
</div>
</div>
続いて、ネストしたビューを表示できるようリスト10のようにルート設定をネストさせます。
// （1） 1階層目のパスを定義
AppController.$routeConfig = [
{path: '/', redirectTo: '/item/detail'},
{path: '/item', component : 'item'}
];
function AppController() {
};
module.controller('ItemController',[ItemController]);
// （2） 2階層名のパスを定義
ItemController.$routeConfig = [
{ path : '/detail', component : 'detail'}
];
function ItemController(){
}
（1）では1階層目の「/item」に該当するコンポーネントを指定します。
2階層目の「/detail」に該当するコンポーネントを指定するには（2）のようにitemコンポーネントのコントローラであるItemControllerにパスとコンポーネントの関係を指定します。
複数のコンポーネントの指定や、ネストしたルート設定などを組み合わせると、残念ながらまだまだうまくいかないケースが多々あるようです。
まだまだ、公開されているサンプルコードなども足りないために、推奨される利用方法なども不明な部分が多々ありますが、正式版がリリースされる頃には改善されているものと思います。
最後に
ルーター機能は、AngularJSが得意とするSPA（シングルページアプリケーション）では特に重要な機能で、MVC構造をどのように管理するかという点にまで影響があるといっても過言ではありません。
そういう意味でもAngularJSに限らず、SPAではこのルーター機能の良し悪し、もしくは、その選択がプロジェクト全体にも影響してしまいます。
ngNewRouterはまだまだ開発中ではありますが、現段階では、ビルトインRouterのシンプルさや、UI Routerのように画面遷移をより意識したルーターとは別な特徴を持った、より独立性が高いコンポーネントの組み合わせをコントロールできるルーターであるという印象を受けました。
