Отдельный контроллер AngularJS для просмотра деталей?

Question

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

Вы бы создали другой контроллер для просмотра деталей?
Предположим, я создаю блог. В блоге есть несколько сообщений, и первое, что вы увидите, это первая страница, показывающая множество сообщений, которые я создал. Для этого я хотел бы создать BlogController, так же, как это:

(function() { 
    "use strict"; 

    angular.module("BlogApp") 
     .controller("BlogController", ["$rootScope", "$scope", "PostService", function ($rootScope, $scope, PostService) { 
      $scope.blogPosts = []; 

      PostService.getBlogPosts() 
       .then(function success(response){ 
        // Success! 
        $scope.blogPosts = response.data; 
       }, function error(err){ 
        // Error! 
       }); 
     }]) 
})() 

Это очень простой контроллер, который просто получает все мои сообщения в блоге. Всякий раз, когда я нажимаю сообщение в блоге, я хотел бы перейти к другому представлению, показывая подробности этого сообщения. Я мог бы создать отдельный контроллер для этого, но поскольку у моего BlogController его не было, я подумал, что могу просто использовать этот контроллер. Я мог бы сделать некоторые действия, основанные на URL, как это:

(function() { 
    "use strict"; 

    angular.module("BlogApp") 
     .controller("BlogController", ["$rootScope", "$scope", "PostService", "$location", function ($rootScope, $scope, PostService, $location) { 
      $scope.blogPosts = []; 
      var url = $location.url(); 

      switch(url){ 
       case "/blog": 
        PostService.getBlogPosts() 
        .then(function success(response){ 
         // Success! 
         $scope.blogPosts = response.data; 
        }, function error(err){ 
         // Error! 
        }); 
        break; 
       case "/post-details": 
        // Do something specific for this post, if even anything needs to be done 
        break; 
      } 
     }]) 
})() 

ВОПРОС
Что является наиболее «правильный» способ сделать это? Возможно, «правильный» - это неправильное слово, но я хотел бы услышать некоторый аргумент для обоих методов. Что бы вы сделали? Вы бы создали отдельный контроллер для деталей?

Answer 1

Go с два другой контроллер

После анализа вашего дела, я хотел бы предложить вам использовать AngularJs component. Я придумал это решение после прохождения образца образца tutorial, разработанного угловым способом. Это приложение имеет аналогичное требование, подобное вашему. Здесь щелчок по имени телефона приведет вас к странице сведений о телефоне, тогда как в вашем случае щелчок по блогу приведет вас к странице с подробностями блога. Клон всех приложений с помощью git clone --depth=16 https://github.com/angular/angular-phonecat.git

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

Answer 2

Я думаю, что вы можете использовать ng-include, вы можете mantain BlogController, но реализовать некоторый tamplate.html для другой ситуации о своем сообщении в блоге.

, например:

• template1.html -> список вашего блоге
• template2.html -> деталь щелкнули пост

внутри вашего HTML:

<div ng-include="template.url"></div> 

внутри вашего BlogController вы можете иметь схожую ситуацию:

$scope.templates = 
    [ 
     { name: 'template1.html', url: 'template1.html'}, 
     { name: 'template2.html', url: 'template2.html'} 
    ]; 
    $scope.template = $scope.templates[0];