AngularJS は興味深いと思うので評価しようとしていますが、私が使用していた BackboneJS とはかなり異なります。この評価の一環として、既存のバックボーン アプリケーションのいくつかのページを取り上げ、それらを AngularJS に移植してみます。だから私は次のhtmlレイアウトを持っています:
<html>
<head>
</head>
<body>
<div class="page-wrapper">
<div class="header-wrap">
<ul>
<li><a href="#">Ryan Zec</a></li>
<li><a href="#">Admin</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
<div class="content-wrap">
<form>
<input type="text" name="username" value="" />
<input type="password" name="password" value="" />
<input type="button" value="Login" />
</form>
</div>
<div class="footer-wrap">
<span>Copyright © 2012 - Ryan Zec
</div>
</div>
</body>
</html>
バックボーンでは、-wrap クラスを含む div を空にし、各セクションのコンテンツを個別のテンプレートに入れます (各セクションには、表示される複数のテンプレートを含めることができます)。次に、各テンプレートに関連付けられたビューがあり、正しい要素にアタッチされ、その中にテンプレートのコンテンツが表示されます。
AngularJS では、ディレクティブ以外の場所で直接 DOM 操作を行うことはお勧めできません。したがって、これらのセクションのコンテンツは、表示しているページ/URL に基づいて異なるコンテンツに切り替える必要があることを念頭に置いて、BackboneJS で行うのと同じ設定を AngularJS で行うための最良の方法は何でしょうか? (ng-directive-name を div に追加できることはわかっているので、初期ロードでは正しくロードされますが、単一ページ アプリケーションでページが切り替えられたときに別のデータにリロードするにはどうすればよいでしょうか)。