將HTML分解爲AngularJS的管理模板

所以我試圖評估AngularJS，因爲我認爲它很有趣，但它與我一直使用的是BackboneJS完全不同。作爲此評估的一部分，我希望瀏覽我現有的Backbone應用程序，並嘗試將它們移植到AngularJS。所以，我有以下的HTML佈局：將HTML分解爲AngularJS的管理模板

<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 &copy; 2012 - Ryan Zec 
      </div> 
     </div> 
    </body> 
</html>

現在在主幹我會與-wrap類股利空和內容每個部分人會去在一個獨立的模板（每節可能不止一個可能會顯示在其中的模板）。然後將會有一個與每個模板關聯的視圖，以便附加到正確的元素並顯示模板的內容。

現在有了AngularJS，除了指令之外，我們不鼓勵直接DOM操作。所以我想知道在AngularJS中使用相同的設置的最好方法是什麼，我會使用BackboneJS記住這些部分的內容需要根據他們正在查看的頁面/ url切換到不同的內容。（我知道我可以將ng-directive-name添加到div，所以在初始加載時，它會正確加載，但當頁面切換到單個頁面應用程序時，如何讓它重新加載到不同的數據）。

來源

2012-10-16 ryanzec