我有一个使用 Angular 的计算器网站。这是一个响应式页面，根据他们的需要分为 7 个不同计算器部分。我想延迟加载它们以减少一次加载所有内容。
<body ng-app>
<div id="wrapper">
<section id="Index page">1</section>
<section id="Calc 1">2</section>
<section id="Calc 2">3</section>
<section id="Calc 3">4</section>
<section id="Calc 4">5</section>
<section id="Calc 5">6</section>
<section id="Calc 6">7</section>
<section id="Calc 7">8</section>
</div>
</body>
我希望最初加载默认的 index.html 页面，然后您将选择您希望页面加载哪个计算器通过单击按钮(或链接)加载另一个 View ，淡入/淡出和淡入淡出然后加载它的交互项。
我正在寻找与这张图片类似的东西，它准确地描述了我想要的内容减去用户编辑页面的内容(他们会将值输入计算器，但我不确定如何做到这一点终点。
最佳答案
这是一个第三方 Angular 模块，在默认的 ngRoute 上有一些不错的特性。您将 Angular 应用程序设计为状态，并且可以将每个状态与其自己的 Controller 和相互交换的 HTML 模板相关联。你也可以有 parent-child状态关系。
对于您的用例，您可以有一个显示计算器各部分的按钮或链接的根状态。然后每个部分都可以是根状态的子状态。这样一次只有一个计算器部分处于事件状态。计算器子部分只有在选择相应的按钮/链接时才会加载。
根状态
<div id="wrapper">
<section id="Index page">
Index Page
<a ui-sref="root.section1">Section 1</a>
<a ui-sref="root.section2">Section 2</a>
<a ui-sref="root.section3">Section 3</a>
...
<!-- calculator section will be inserted in ui-view -->
<ui-view></ui-view>
</section>
</div>
注意 ui-view 和ui-sref 是由ui-router 提供的指令
关于html - 延迟加载 Angular View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31175747/