Как строить архитектуру приложения на angular при компонентном подходе?

Question

[Cyber_bober]

Здравствуйте, читал мануалы, но не могу найти ответ на этот вопрос. Например, мы создаем приложение и биндим определенную область через ng-view, в ней происходит рендеринг при изменении стейта/модели. Как правильно выстраивать архитектуру?

Мы при создании приложения обозначаем несколько областей и биндим к ним копмоненты, или единовременное взаимодействие происходит в рамках только одного компонента? Например для главной, для блога?

Или (смею предположить что это логично), мы можем выводить в рамках одной страницы несколько компонентов?

Answer 1

[DarthJS]

В доках ui-router очень подробно все написано, можешь пользоваться роутами как душа пожелает :)
Можешь и один компонент выводить и несколько :)

Доки: https://github.com/angular-ui/ui-router/wiki/Multi...
Пример: embed.plnkr.co/nmTggEdWIcMW5bMRKiok/preview

З.Ы. Если ответ не совсем подходит, приведи хотяб небольшой пример, что собираетесь делать, а то вопрос немного размытый.

Comments

[Cyber_bober]

Спасибо большое за линки, почитаю это, думаю разберусь со временем :)

Answer 2

[ozknemoy]

глянь структуру реального проекта. это часть index.html. в ui-view тоже есть свои состояние. там можно городить что твоей душе угодно

<div  id="wrapper">
    <aside id="sidebar-wrapper">
        <menu-toggle close="1" class="sidebar_navigation">
            <a ui-sref="projects" ui-sref-active="current" class="sidebar_navigation--link">
                <span class="sidebar_navigation--icon icon1"></span>Проекты</a>
            <a  ui-sref="users" ui-sref-active="current" class="sidebar_navigation--link">
                <span class="sidebar_navigation--icon icon2"></span>Пользователи
            </a>
            <a ui-sref="help({'id':'a1'})" class="sidebar_navigation--link">
                <span class="sidebar_navigation--icon icon4"></span>
                О CONSTART
            </a>
            <!--<a ui-sref="help({'id':'a3'})" class="sidebar_navigation&#45;&#45;link">
                <span class="sidebar_navigation&#45;&#45;icon icon6"></span>
                Стоимость услуг
            </a>-->
            <a ui-sref="help" class="sidebar_navigation--link">
                <span class="sidebar_navigation--icon icon5"></span>
                Помощь
            </a>
        </menu-toggle>

        <div class="sidebar--footer">
            <div class="social">
                <a href="https://vk.com/constartru" target="_blank" class="vk"><i class="fa fa-vk"></i></a>
                <a href="https://www.instagram.com/constart.ru/" target="_blank" class="in"><i class="fa fa-instagram"></i></a>
                <a href="https://www.youtube.com/channel/UCOxuxxrAhiKB1U0RYQPB5FA" target="_blank"><i class="fa fa-youtube"></i></a>
            </div>

            <div class="copyright">&copy; 2016 CONSTART <br> ООО "Констарт"</div>
        </div>

    </aside>
    <nav-bar class="navigation"></nav-bar>

    <section id="page-content-wrapper">

         <ui-view></ui-view>

    </section>

    <footer>
        <div class="footer_wrap">
            <div class="footer--links">
                <p><a ui-sref="help({'id':'a1'})">О CONSTART</a></p>|
                <p><a ui-sref="help({'id':'a8'})">Контакты</a></p>|
                <!--<p><a ui-sref="help({'id':'a3'})">Цены на услуги</a></p>|-->
                <p><a ui-sref="help">Помощь</a></p>|
                <p><a ui-sref="help({'id':'u1'})">Правила пользования платформой</a></p>|
                <p><a ui-sref="help({'id':'a64'})">Пользовательское соглашение</a></p>
            </div>
            <div class="social">
                <a href="https://vk.com/constartru" target="_blank" class="vk"><i class="fa fa-vk"></i></a>
                <a href="https://www.instagram.com/constart.ru/" target="_blank" class="in"><i class="fa fa-instagram"></i></a>
                <a href="https://www.youtube.com/channel/UCOxuxxrAhiKB1U0RYQPB5FA" target="_blank"><i class="fa fa-youtube"></i></a>
            </div>
        </div>
    </footer>

</div>
<toast></toast>
<scroll-up class="btn_up"></scroll-up>

Comments

[Cyber_bober]

Спасибо большое за код, буду втыкать :)