延遲加載角度視圖

我有一個計算器網站正在使用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

延遲加載角度視圖

回答

相關問題