AngularJS: использование всех возможностей/структур AngularJS

Я работаю над веб-приложением с AngularJS, которое недавно начал изучать. Я нахожу его чрезвычайно полезным, но, проработав над ним несколько дней, я понял, что приложение рано или поздно запутается, так как я написал весь свой «бэкэнд» код в одном контроллере. Приложение использует множество запросов $http для получения/отправки/удаления/помещения данных с/на удаленные серверы, а также множество переменных области видимости, которые необходимы для того или иного манипулирования страницей.

Я проверил множество учебных/информационных сайтов по AngularJS (похожий вопрос, отличный пост в блоге, например), но я до сих пор не знаю, как реализовать один из моих собственных в моем приложении. Мне было интересно, как обычно обстоят дела с использованием собственного сервиса/модуля/директивы/фабрики? Я надеюсь немного реструктурировать свой код, чтобы все выглядело более организованным; на данный момент я думаю, что не полностью использую преимущества AngularJS со всем своим кодом в одном месте и без использования каких-либо сервисов/модулей, кроме моего основного модуля приложения и контроллера и встроенного $http.

Чтобы вы могли лучше понять мою проблему, пока я использую только два файла javascript, первый из которых app.js :

var app = angular.module('MyAppName',[]);

а второй — controller.js (конечно, я мог бы использовать для этого только 1 файл):

app.controller("MyController", function($scope, $http){
    // all my functions/variables in here
   // I initialize them  with $scope.someName = … if they are needed within this controller view.
  //  If they are not needed within view I initialize them (functions for instance)
 // as functionName = function(){};
}

Так все работает как надо, но я думаю такой подход не использует все возможности AngularJS. Например: я не использую маршрутизацию, которую, вероятно, должен? (URL-адрес все время остается одним и тем же). Я также не использую какие-либо другие расширенные функции angularJS, такие как пользовательские службы/директивы/модули.

Поэтому я спрашиваю: как я могу реструктурировать свой код, чтобы он использовал больше функций AngularJS и оставался читабельным? Когда вы обычно создаете свой собственный сервис/модуль/фабрику? Я как бы не понял всего этого на сайте AngularJS, вероятно, потому, что я начал разрабатывать слишком рано, не имея достаточных знаний, и теперь я почти не понимаю (слишком увлекался двусторонней привязкой и сразу начал кодировать).

Любая помощь по этому вопросу приветствуется.

EDIT: Хорошо, я вижу, что должен кое-что прояснить: моя главная проблема не во внешней структуре папок/файлов, а в самой структуре кода. Теперь у меня есть один контроллер, который содержит все переменные (30+) и функции для использования в моем веб-приложении, такие как функция входа в систему, функция выхода, функции для отображения/скрытия частей страницы, функция для добавления/удаления данных на/с сервера и т. д. Я хотел бы каким-то образом структурировать эти функции/переменные как независимые части, но я не уверен, как это сделать.

EDIT2: Я понял, например, как использовать службы, но, к сожалению, вы не можете вызывать функции службы внутри представлений, например, с помощью ng-click напрямую... вы можете вызывать только переменные $scope, что на самом деле логично. .. к сожалению, я до сих пор не знаю, как организовать свой код, чтобы он выглядел более читабельным и структурированным


person trainoasis    schedule 08.02.2014    source источник
comment
Не могли бы вы создать скрипку или плунжер, пожалуйста? Даже если это не работает, просто чтобы мы видели, что и где вы делаете, чтобы направлять вас.   -  person glepretre    schedule 10.02.2014
comment
Это просто уродливая попытка того, как выглядит мой код (не могу скопировать его весь, его и так слишком много). Постарайтесь сосредоточиться на одной проблеме: все функции и переменные распределены в одном контроллере, это беспорядок. /JTUTn/1   -  person trainoasis    schedule 10.02.2014
comment
Может быть, вы могли бы начать очистку своей основной области: я создал объект $scope.show, обертывающий все ваши переменные $scope.showFoo, и вы можете попытаться внедрить $scope.login как службу, используя фабрику. Обновленная скрипта: jsfiddle.net/JTUTn/2   -  person glepretre    schedule 10.02.2014
comment
@glepretre спасибо за помощь. Да, объединение похожих переменных вместе звучит как хороший шаг вперед. Но экстернализировать логин как фабрику услуг, я думаю, это выше моих сил. Я не уверен, как начать делать это даже?   -  person trainoasis    schedule 10.02.2014
comment
Пробовали ли вы руководство по AngularJs, посмотрите ресурсы, чтобы начать, как eggehead.io? Если нет, я думаю, вы должны сделать это в первую очередь, прежде чем погрузиться в Angular World напрямую. Затем вы сможете просмотреть некоторые примеры сервисов, такие как этот и полностью понять их ;)   -  person glepretre    schedule 10.02.2014
comment
Я прошел учебник, но не заметил ресурсов, вашей второй ссылки. это выглядит многообещающе, там много всего! буду копаться и пытаться понять как можно больше. Но времени мало. спасибо @glepretre   -  person trainoasis    schedule 10.02.2014


Ответы (2)


Существует множество мнений о том, как организовать код AngularJS. Взгляните на эти сообщения в блоге:

Существует также множество примеров проектов, демонстрирующих различные схемы организации кода.

Взгляните на проект angular-seed:

https://github.com/angular/angular-seed

Одной из альтернатив вышеизложенному является angular-enterprise-seed:

https://github.com/robertjchristian/angular-enterprise-seed

Вы не упомянули, какой бэкенд вы используете, но есть и похожие «начальные» проекты, демонстрирующие рекомендуемую схему организации кода для AngularJS + [ваш бэкенд]. Например, если вы используете Express.js, вы можете взглянуть на angular-express-seed:

https://github.com/btford/angular-express-seed

person Sergey K    schedule 08.02.2014
comment
Хороший ответ, эта презентация также может вас заинтересовать: большие приложения с угловыми кодами - person glepretre; 10.02.2014
comment
Спасибо за ваше время. Мой вопрос показывает, что у меня также есть проблемы с организацией в моем коде - не только в структуре папок/файлов, но и в том, как создавать свои собственные «блоки» кода, чтобы мой код был более структурированным, например службы, фабрики; Я до сих пор не уверен, как использовать их как свои собственные. - person trainoasis; 10.02.2014
comment
Добавлено редактирование к моему вопросу - person trainoasis; 10.02.2014

Привязка данных — Angular JS обеспечивает двустороннюю привязку — автоматическую синхронизацию данных между моделью и представлением. Расширяемость — AngularJS настраивается и расширяется. Позволяет создавать настраиваемые компоненты.

Повторное использование кода и ремонтопригодность. AngularJS заставляет вас писать код модульным способом. Переменные и функции могут быть созданы только для соответствующего компонента (контроллера). Предоставляет сервис и заводскую реализацию для использования на контроллерах.

Совместимость — AngularJS совместим со всеми основными браузерами.

Тестирование. AngularJS предназначен для тестирования, чтобы вы могли как можно проще тестировать компоненты приложения AngularJS. В его основе лежит внедрение зависимостей, что упрощает его тестирование.

http://astutejs.blogspot.in/2015/06/advantages-of-angular-js.html

person Jean Kellou    schedule 04.07.2015