Нарезать SPA на несколько компонентов и использовать AngularJS

Question

Я полный новичок в AngularJS, так что это может быть что-то совершенно тривиальное. Я создаю приложение Asp.net MVC (на самом деле просто поставляющее незначительные детали) с веб-интерфейсом API (включая возможности входа / выхода из системы).

Я хотел бы использовать AngularJS в моем приложении. Но у меня есть небольшая дилемма, как разделить мою страницу на несколько разделов, которые в некоторой степени работают независимо. Допустим, это упрощенный скелет моей страницы.

Вопросы

Как мне структурировать части AngularJS на моей странице?

1. Должен ли я иметь один ng-app для всей страницы или есть несколько не вложенных для каждого отдельного компонента на моей странице?
2. В случае одного ng-app Я ожидаю иметь один ng-view это будет включать компоненты контекста и контента.
3. Как насчет маршрутизации на стороне клиента с каждым отдельным параметром (один / несколько ng-app)?

Это жизнеспособный подход или я должен думать об Angular по-другому и структурировать его по-другому?

Скорее всего, у меня должны быть отдельные контроллеры для каждого отдельного компонента и одна служба аутентификации (взаимодействующая с веб-API на сервере) для предоставления авторизованных пользователем элементов.

Чтобы вы посоветовали?

Не берите в голову, я полный новичок в AngularJS, но я очень разбираюсь в серверной части (MVC и API).

Answer 1

Позвольте мне попытаться решить некоторые проблемы

Должен ли я иметь одно ng-приложение для всей страницы или несколько не вложенных для каждого отдельного компонента на моей странице?

Там может быть только 1 ng-app на SPA, поэтому вы не можете иметь ng-app для каждого компонента. Вы можете иметь модуль для каждого компонента, который может быть привязан к ng-app связанный модуль.

В случае одного ng-приложения, я ожидаю иметь одно ng-представление, которое будет включать компоненты Context и Content.

ng-view будет содержать только содержимое активного представления. Для этого не нужно иметь никаких меню. Там может быть что-то вроде RootController который является контейнером для всего приложения. HTML будет состоять из очевидного ng-view и количество ng-include,

Что-то вроде

<div ng-controller='RootController'>
   <div id="contextMenu"><ng-include  src='contextMenuTemplate'></div>
   <div id="primaryMenu" ><ng-include src='primaryMenuTemplate'></div>
   <div id="secondarMenu" ><ng-include src='secondaryMenuTemplate'></div>
   <div ng-view/>
</div>

В вашем RootController вы бы имели такую ​​логику, как

if ($route.path) {
   $scope.contextMenuTemplate="path1";   //path corresponding to the route
}

Или же вы можете также создать карту объектов и использовать ее для выбора шаблонов

var viewTemplates= [{
    path:"/home",
    contextMenuTemplate:"path1",
    primaryMenuTemplate:"path2",
    secondaryMenuTemplate:"path3"
}]

Теперь это можно использовать для выбора шаблонов в ng-include.

Как насчет маршрутизации на стороне клиента с каждой отдельной опцией (одно / несколько нг-приложений)?

Маршрутизация происходит на ng-view только часть Вы выбираете другие шаблоны для загрузки на основе основного представления. Вы также можете посмотреть на ui-router для предварительной маршрутизации.

Обновление Когда аутентификация и авторизация входят в картину, и сервер, и клиент играют свою роль. Сервер аутентифицируется, а затем может использовать эту информацию для обслуживания различных шаблонов, если пользователь аутентифицирован или нет, и может по одному и тому же URL. Например /home/leftnav может сервер различного контента на основе аутентифицированного пользователя. То же самое можно сделать на угловой стороне, но это поведение можно обойти, так как это просто javascript. То же самое относится и к вызовам API (с использованием WebAPI), где сервер может решить, что отправить обратно.

На стороне клиента пользовательское состояние может отслеживаться с помощью сервиса \ фабрики. Сервис как UserService с методами \ свойствами вроде CurrentUser может предоставить подробную информацию о текущем вошедшем в систему пользователе и может быть введен в любую директиву, фильтр, контроллер, который, чтобы принимать решение, основываясь на том, вошел ли и какой пользователь вошел в систему.