将 HTML 分解为 AngularJS 的管理模板答案

【问题标题】：Breaking HTML into management templates for AngularJS将 HTML 分解为 AngularJS 的管理模板
【发布时间】：2012-10-16 19:59:34
【问题描述】：

所以我正在尝试评估 AngularJS，因为我认为它很有趣，但它与我一直使用的 BackboneJS 完全不同。作为这次评估的一部分，我想从我现有的 Backbone 应用程序中提取几页，并尝试将它们移植到 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 &copy; 2012 - Ryan Zec
            </div>
        </div>
    </body>
</html>

现在在主干中，我会让带有 -wrap 类的 div 为空，并且每个部分的内容都将放在单独的模板中（并且每个部分可以有多个模板显示在其中）。然后将有一个与每个模板关联的视图，以附加到正确的元素并在其中显示模板的内容。

现在使用 AngularJS，不鼓励在除指令之外的任何地方直接进行 DOM 操作。所以我想知道在 AngularJS 中进行与 BackboneJS 相同的设置的最佳方法是什么，记住这些部分的内容需要根据他们正在查看的页面/url 切换为不同的内容？（我知道我可以将 ng-directive-name 添加到 div 以便在初始加载时正确加载，但是如何在单页应用程序中切换页面时让它重新加载到不同的数据）。

【问题讨论】：

标签： backbone.js angularjs

【解决方案1】：

答案是指令:)

你可以使用这个 -> http://jsfiddle.net/thaqL/

或者只是下载 chrome -> 转到 http://angularjs.org -> 按 F12 -> 看看他们是如何做到的

希望对你有帮助。

干杯

【讨论】：

该代码不是我遇到的问题，但以该代码为例：jsfiddle.net/q7hTg：我有 2 个用于不同数据和 html 结构的标头控制器和指令。现在，当单击切换标题链接时，我必须这样做，标题为 header2 切换而不重新加载页面（如在单页应用程序中）。

【解决方案2】：

我认为目前最好的答案是 ngInclude。我认为 AngularJS 团队希望在未来使路由更强大（基于我记得读过的东西）（比如每个路由的多个视图，每个视图应该有一个标题控制器，一个页脚控制器和一个控制器主要内容），但在那之前 ngInclude 应该可以帮助我。

【讨论】：