Структурирование моего приложения AngularJS

Я полностью новичок в использовании AngularJs, и хотя я прошел через учебники, у меня все еще есть множество вопросов без ответа. Моя главная проблема сейчас заключается в том, как мне разделить мое приложение на модули?

В основном мне нужно создать приложение, которое будет выступать в качестве портала для различных приложений, каждый из которых представляет собой бизнес-функциональность (иногда с небольшими отношениями друг с другом).

В учебнике показано, как создать одно приложение с несколькими видами. Что мне нужно, это одно приложение с несколькими модулями, каждый модуль имеет свои собственные представления (и у меня, вероятно, также есть общие представления).

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

Проект AngularJS Seed (https://github.com/angular/angular-seed) хорош, но на самом деле он не показывает, как построить сложное приложение.

Ответ 1

[EDIT] Я написал статью в своем блоге, чтобы более подробно объяснить ситуацию:

читайте его на sam-dev.net, и теперь вы можете читать часть II, с образцом кода.

Я отвечу на свой вопрос. Не потому, что я считаю, что это лучший подход, а только потому, что я решил пойти с ним.

Вот как я разделил свои бизнес-модули на папки

приложение
- businessModule
  - Контроллеры
    - index.js
    - firstCtrl.js
    - secondCtrl.js
  - директивы
  - услуги
  - вид
  - фильтры
- anotherBusinessModule
- общие
- app.js
- index.html

Каждый модуль имеет собственную структуру папок для контроллеров, директив и т.д.

Каждая папка имеет файл index.js, а затем другие файлы для разделения каждого контроллера, каждой директивы и т.д.

В файле index.js содержится определение модуля. Например, для контроллеров бизнес-модуля выше:

angular.module('myCompany.businessModule.controllers', []);

Здесь нет зависимостей, но может быть и любой.

Затем в firstCtrl.js я могу повторно использовать этот модуль и добавить к нему контроллер:

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     

        function(){
});

Затем app.js агрегирует весь модуль, который я хочу для моего приложения, добавив их в массив зависимостей.

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);

Общая папка содержит директивы и другие вещи, которые не относятся к бизнес-модулю и которые могут быть повторно использованы в любом месте.

Опять же, я не знаю, подходит ли это лучший подход, но он определенно работает для меня. Может быть, это может вдохновить других людей.

ИЗМЕНИТЬ

Поскольку файлы index.js содержат объявления модулей, они должны быть указаны на странице html перед любыми другими сценариями приложения. Для этого я использовал IBundleOrderer ASP.NET MVC 4:

 var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };
 bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);
        return files;
    }
}

Ответ 2

Сэм-метод, похоже, подходит для большинства случаев. В текущей документации Angular она настроена как модуль для каждого контроллера, службы и т.д., Но это противоречило самому Мишко из Google.

В недавнем видеоролике Angularjs Best Practices Мишко показывает, как можно построить структуру модулей для удобства тестирования, а также для легкого масштабирования. Имейте в виду, как вы структурируете модули, не должно влиять на производительность в приложении Angular.

От разработки приложений Angular я бы предложил использовать метод наилучшей практики по вышеупомянутым причинам. Возможно, вы захотите создать свой собственный node script для генерации ваших контроллеров и т.д., Которые могут включать в себя, например, модуль, в котором вы хотите создать контроллер, и имя, которое затем автоматически сгенерирует ваш контроллер и проведет надлежащий тест создание спецификации.

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

Ответ 3

вы должны пойти на yoman https://github.com/yeoman/yeoman и структуру генератора yeoman: https://github.com/yeoman/generator-angular, это станет лучшим решением для настройки приложения, чем angular -seed. Для разных бизнес-модулей вы должны создавать разные приложения и общие сервисы и директивы.

Ответ 4

Для тех, кто заинтересован, я сделал "модульную" версию Angular Seed, которая лучше подходит для лучших практик Misko: https://github.com/sanfordredlich/angular-brunch-seed-modularized

Он настроен с помощью Brunch, поэтому вы очень быстро получаете перезагрузку страницы, тестирование и многое другое. Вы можете быстро развиваться, и если вы будете следовать шаблонам кода, ваше приложение должно масштабироваться достаточно хорошо. Наслаждайтесь!

Ответ 5

Откат назад, я нашел подход, который принимает генератор yoman, состоит в том, что он действительно не входит в состав модулей angular, поэтому он не чувствует себя очень сплоченным для меня. Так как проект становится больше, и вы работаете над определенным компонентом, я обнаружил, что много листаю в исходном дереве.

Недавно я столкнулся с другим подходом здесь. Этот подход группирует файлы с помощью модулей angular и чувствует себя более сплоченным для меня. Одним из возможных недостатков этого является тот факт, что вам необходимо создать сайт, на котором вы не можете просто запустить его на месте. Тем не менее, проблема с ворчами в этом проекте помогает.