AngularJS: как разделить длинный контроллер на модули?

Question

Построение моего первого углового приложения, и я не понимаю, как разбить код на более мелкие куски. У меня просто один длинный контроллер, но если я попытаюсь разделить код на отдельные разделы (контроллеры, службы и т. Д.), Внезапно данные больше не привязаны к представлению (т. Е. Я обновляю данные, но меняет aren показывается в представлении/браузере).

ie. У меня есть простое приложение, которое подключается к api, чтобы получить список «Книги», затем отображает список и позволяет пользователю перемещаться с использованием разбивки на страницы, или получить более подробную информацию для одной книги или обновить книгу (отредактировать /Удалить).

Я хотел бы разделить функции на отдельные контроллеры, такие как:

• поиск контроллера: ручки формы проверки, $ НТТР API;
• books (список): отображает результаты поиска api;
• книга (одиночный) контроллер: каждый элемент в списке книг представляет собой отдельный элемент с вызовами типа «подробнее» и «редактировать/удалять»;
• pagination Контроллер: функции для следующего/prev через список книг;
• Сообщения Контроллер: отображает сообщение об ошибке/ошибке при выполнении действия в контроллерах «поиск», «книга» или «разбиение на страницы».

Проблема: я не знаю, как это установить, потому что если я использую службы для хранения/вывода модели «книг» или «сообщений», когда я делаю обновление этих данных через один из контроллеры, изменение не автоматически обновляет представление (например, если бы я обновил переменную $ scope, связанную с контроллером).

Из того, что я понимаю, переменная $ scope в представлении обновляется автоматически, так какпривязывает к региону. Но как это будет работать со службой? Вы не используете тег ng-service, правильно ...?

Итак, скажем, у меня есть мой поисковик, вызывающий api, получите json из всех книг. Я засунул это в booksService для хранения. Тогда мои booksController, который отвечает за обновление списка всех книг на странице, должен загрузить эту книгуService для получения новых данных ... но как она узнает, что данные были обновлены? Как связать данные из booksService через bookController, чтобы отобразить новые результаты в представлении?

А также, как бы я пошел на структурирование booksService - как мне получить searchController для передачи новых данных (для обновления постоянной переменной, которую я могу использовать для модели), а затем как мне получить booksController для загрузки в новых данных? Мне нужно создать вызов из booksService, чтобы PUSH новые данные в booksController, или если у booksController есть вызов PULL новых данных из booksService (и если да, то как он узнает, когда он должен сделать PULL)?

Кроме того, searchController и paginationController будет производить вызов GET с совпадающим запросом с одним и тем же API (разница будет только переменной $ page в запросе). Должен ли я использовать «сервис» (или это фабрика?), Чтобы отделить этот запрос $ http.get?

И наконец, как лучше всего структурировать все эти контроллеры/службы в структуре папки/файла? Должен ли я стремиться разделить каждый кусок на отдельный файл * .js? Должен ли я использовать запрос.js для импорта файлов? В этом случае это одна страница веб-сайта (там, где на сайте может быть другая другая страница, подобная этой странице). Если я разделяю код на отдельные файлы, должен ли я группировать файлы в одной папке на каждой веб-странице? (т. е. если я добавлю страницу «пользовательская панель», все файлы будут храниться в отдельной папке со страницы «поисковые книги»).

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

Answer 1

Поместите все ваши контроллеры таким образом в файл controller.js.

angular.module('starter.controllers', []) 

.controller('SearchCtrl', function($scope) { 
    //do your search stuff 
}) 
.controller('BookCtrl',function($scope){ 

}) 
.controller('PaginationCtrl',function($scope){ 

}) 
.controller('MessagesCtrl',function($scope){ 

}); 

//in your services.js file 

angular.module('starter.services', []) 

/** 
* A simple service that returns some data. 
*/ 

.factory('Search', function() { 

    var somedata="from service"; 

    return { 
    sample: function() { 
     return somedata; 
     } 
    } 
)}; 

вы можете вызвать заводскую службу из любого контроллера, как этот

.controller('SearchCtrl', function($scope, Search) { 
//get data from factory service 
    $scope.getdata=Search.sample(); 

}) 

также в файле директивы

/* 
its route map for the application 
all the page navigation are done here 
common for the application 
*/ 
angular.module('app',[ 
'ui.router' 
]) 
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){ 

    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('home',{ 
     url:'/', 
      templateUrl:'templates/home.html', 
      controller:'SearchCtrl' 
     }) 
     .state('about',{ 
     url:'/about', 
      templateUrl:'templates/about.html', 
      controller:'aboutCtrl'  
     }) 

}]) 

В вашем home.html вы можете прочитать данные по этому пути

<h2>{{$scope.getdata}}</h2> 

Проверьте эту ссылку (http://ionicframework.com/getting-started/) и попробуйте пример tabs приложение, которое имитирует работу приложений на основе вкладок. Ионная графика с угловыми стрелками лучше подходит для таких приложений.