Question

我有一个使用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页面，然后您将通过点击按钮（或链接）选择您希望页面加载另一个视图的计算器输入/输出然后加载其交互式项目。

我正在寻找类似于这张照片的东西，它描述了我想要的东西减去用户编辑页面（他们会将值输入到计算器中，但我不知道如何达到那个目的。

http://i.stack.imgur.com/h36MS.jpg

Answer 1

结帐ui-router，它是首发guide。

这是第三方角度模块，在默认ngRoute上有一些不错的功能。您将角度应用程序设计为states，并可以将每个状态与其自己的控制器和相互交换的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

提供的指令

延迟加载Angular视图

1 个答案: