0

I'm currently developing an AngularJS application, and I've come across this one "issue" or I'd rather call it a "snag", that I'm not sure how to structure.

Would you create a different controller for a details views?
Let's say I'm creating a blog. The blog has some posts, and the first thing you'll see is the front page, showing the many posts that I've created. For this I would create a BlogController, just like this:

(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!
                });
        }])
})()

This is a very basic controller that just gets all my blog posts. Whenever I click a blog post, I'd like to navigate to another view, showing the details of this post. I could create a separate controller for this, but as my BlogController doesn't have much in it, I thought that I might as well just use this controller. I could do some actions based on the URL, like this:

(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;
            }
        }])
})()

QUESTION
What is the most "correct" way of doing this? Perhaps "correct" is the wrong word, but I'd like to hear some argument for both methods. What would you do? Would you create a separate controller for the details?

Detilium
  • 2,868
  • 9
  • 30
  • 65

2 Answers2

1

Go with two different controller

After analyzing your case, I would suggest you to use a AngularJs component. I came up with this solution after going through the sample application tutorial developed by angular. This application has similar requirement like yours. Here, a click on the phone name would take you to a phone details page whereas in your case a click to blog will take you to blog details page. Clone the entire application using git clone --depth=16 https://github.com/angular/angular-phonecat.git

Even though you wish to go with your design, you should use different controllers as it becomes easy to refactor and test also as this suggests each time your controller is instantiated a new scope is created which can become tedious task to manage.

Community
  • 1
  • 1
faizal vasaya
  • 517
  • 3
  • 12
  • So even though you mention components, you would've gone with two controllers? – Detilium Feb 17 '17 at 08:37
  • I mentioned about two controllers in case you might not want to change entire design. The best is to go with component as it makes your code reusable + you can unit test it easily + decomposition and separation of concerns is be achieved. – faizal vasaya Feb 17 '17 at 08:40
1

I think that you can use ng-include, you can mantain BlogController but implement some tamplate.html for a different situation about your blog post.

for example:

  • template1.html -> list of your blog post
  • template2.html -> detail of clicked post

inside of your html:

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

inside your BlogController you can have similar situation:

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