Каким будет лучший способ разделить приложение AngularJS на более мелкие куски/модуль?. Например, если у меня есть сообщение в блоге и комментарии для этого, я думаю, что я мог бы разбить его на модули, например "сообщения" и "комментарии" (?) (может быть, не лучший пример, но идея состоит в том, чтобы разделить логику приложения на отдельные модули, а не на создание огромного одномодульного приложения).
Я попытался загрузить оба модуля в отдельные узлы DOM и использовать маршрутизацию в обоих модулях соответственно. Есть несколько проблем:
- Как одностраничное приложение, я загружаю модуль комментариев, который будет использоваться даже на первой странице, даже если он не используется там.
- Так как я не могу использовать несколько ng-views внутри ng-app, я вынужден написать все обертки для своих модулей в представлении index.html и загрузить их? Должно быть так? Кажется, что это неправильно. Как/где я должен их загрузить?
- Есть ли подсказки для маршрутизации? Должен ли я распространять их в модулях или я должен объединить их все вместе? (создание одного модуля "blog" для включения модулей "posts" и "comments" в зависимости от зависимостей, все равно будет сложно определить, например, маршрутизацию "/post/: id"??)
index.html
<div class="post"><ng-view></ng-view></div>
<div class="comments"><ng-view></ng-view></div>
javascript.js
angular.module('posts', []).config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
'template': 'Showing all the posts',
'controller': 'postCtrl
})
.when('/post/:id', {
'template': 'Showing post :id',
'controller': 'postCtrl
});
}]);
angular.module('comments', []).config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/post/:id', {
'template': 'Showing post :id comments',
'controller': 'CommentsCtrl'
});
}]);
angular.bootstrap($('.post'), ['posts']);
angular.bootstrap($('.comments'), ['comments']);