Lazy loading Angular views

У меня есть сайт калькулятора, который использует Angular. Это одна страница, которая реагирует и разбивается на 7 разделов разных калькуляторов на основе того, что они хотят. Я бы хотел, чтобы они лениво загружали их, чтобы сбрасывать все сразу.Lazy loading Angular views

<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.

Для вашего случая использования у вас может быть состояние root, которое отображает кнопку или ссылки для разделов калькулятора. Тогда каждый раздел может быть дочерним состоянием корневого состояния. Таким образом, только одна секция калькулятора будет активна одновременно. Секции дочерних элементов калькулятора будут загружаться только при выборе соответствующей кнопки/ссылки.

корень состояние

<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

Lazy loading Angular views

ответ

Смежные вопросы