延迟加载角度视图

我有一个计算器网站正在使用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

来源

2015-07-02 Bengejd

这是一个有点不清楚你在问什么提供指令。你是否期待懒惰地加载控制器的html模板文件？还是你想懒惰地加载JS本身？无论哪种方式，角度并不能提供很多帮助。你可能会想要像requirejs那样的东西。 –

@AndrewEisenberg抱歉不清楚，我仍然在学习AngularJS，因此我的皮带上还没有行话。我期望延迟加载HTML模板，以便在更改计算器时不必重新加载页面，但是所选计算器的html模板可以。 – Bengejd

退房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

来源

2015-07-02 05:10:50 allienx

延迟加载角度视图

回答

相关问题