Question

我目前正在开发一个AngularJS应用程序，而且我遇到过这个问题＆＃34;问题＆＃34;或者我宁可称它为“不应该”，我不确定如何构建。

您是否会为详细信息视图创建不同的控制器？
让我们说我正在创建一个博客。该博客有一些帖子，您首先看到的是首页，显示了我创建的很多帖子。为此我会创建一个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;
            }
        }])
})()

问题
什么是最正确的＆＃34;正确＆＃34;这样做的方式？也许＆＃34;纠正＆＃34;这是错误的词，但我想听听两种方法的争论。你会怎么做？你会为细节创建一个单独的控制器吗？

Answer 1

使用两个不同的控制器

在分析您的案例后，我建议您使用AngularJs component。在完成angular开发的示例应用程序tutorial后，我想出了这个解决方案。此应用程序具有与您类似的要求。在这里，单击电话名称会将您带到电话详细信息页面，而在您的情况下，点击博客会将您带到博客详细信息页面。使用git clone --depth=16 https://github.com/angular/angular-phonecat.git

克隆整个应用程序

即使您希望使用您的设计，您也应该使用不同的控制器，因为它变得易于重构和测试，因为this建议每次实例化控制器时创建新的范围，这可能会成为繁琐的任务管理。

Answer 2

我认为您可以使用ng-include，您可以使用BlogController，但可以针对您的博客文章的不同情况实施一些tamplate.html。

例如：

template1.html - ＆gt;你的博客文章列表
template2.html - ＆gt;点击帖子的详细信息

你的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];

AngularJS单独控制器的详细信息视图？

2 个答案: