AngularJS: Multiple Controllers to a View

Question

Nowadays I am playing with MVC pattern using AngularJS. I am confused a lot between controller, models and views. What I have understood so far is that, in MVC pattern we have following three:

1) Model: Model is any of the logic, or database or the data itself. In anguarljs, models are created using factories or services.

2) Views: View is how our data is represented or displayed to the user. This simply represents our model to the user.

3) Controller: Controller is something which controls. As written on Coding Horror, controller is the brains of the application. The controller decides what the user's input was, how the model needs to change as a result of that input, and which resulting view should be used.

So by looking at the definition of controller I can say controller is the boss. It will be responsible for whatever will happen. In my application, I have couple of models like project, shape, note etc. What I am doing is I have created factories for each model. e.g. ProjectFactory, ShapeFactory, NoteFactory. And I have created controller for each one of them i.e. ProjectController, ShapeController, NoteController to control stuff regarding to project, shape and note. I am not sure whether it's correct or not.

In my application I have a couple of views as well i.e. map-view.html, project-view.html. For each view there's controller MapViewController, ProjectViewController. My project view need projects and notes. So I need to use ProjectViewController, ProjectController, NoteController in my project-view.html. I don't know how can I do so. I can create a ladder of controller like this:

<div ng-controller="ProjectController">
    <div ng-controller="NoteController">
        <div ng-controller="ProjectController">
        Project view goes here
        </div>
    </div>
</div>

But it's not a good way to do so cause tomorrow I'll have large number of model so I can not create this ladder and also accessing the scope of parent will be a pain in the back. It will be like:

$socpe.$parent.$parent.$parent.data='Set data.'

Antoher apporach is that I can create services like ProjectService, ShapeService and NoteService and use these services in ProjectViewController. But that leads me to confusion since all the stuff which will be taken care by theses services should be handled by controller and these controllers should be used at multiple places/views. Is it correct or the controllers I mean angularjs controllers are different from MVC pattern controller? I am messed up with all these concepts.

The latter is the right approach in my opinion. One view, one controller and inject the services you need. This keeps everything nice and clean. — shammelburg
– shammelburg, Commented Mar 29, 2016 at 9:12
The latter one leads me to this stackoverflow.com/questions/36257080/… — Hitesh Kumar
– Hitesh Kumar, Commented Mar 29, 2016 at 9:13
Depends on how you access your data, JSON file or HTTP, there is nothing wrong with calling the data when the view changes. If the data is the same and never changes use JSON, otherwise use HTTP. — shammelburg
– shammelburg, Commented Mar 29, 2016 at 9:19

z.a. · Accepted Answer · 2016-03-29 10:06:12Z

1

Try using directives instead,

<div ProjectDirective>
    <div NoteDirective>
        <div>

        </div>
    </div>
</div>

This way, you get a chance to provide mvc for every directive, and you can have these isolated per directive. Much easier to organize.

Example directive function,

        // Code goes here
var app = angular.module('demoApp', []);


(function(angular) {
  'use strict';

  var projectDirective = function() {
    function controller() {
      this.hello = 'I am from project directive.';
      console.log('Not sure why this is not getting called');
    }

    function link() {
    }

    return {
      restrict: 'EA',
      link: link,
      controller: controller,
      template: '<div>{{ctrl.hello}}<span ng-transclude></span></div>',
      //templateUrl: 'xxx.html',
      controllerAs: 'ctrl',
      bindToController: true,
      transclude: true,
      scope: {}
    };
  };
  app.directive('projectDirective', [projectDirective]);
})(angular);

(function(angular) {

  app.controller('ViewController', ['$scope', function($scope) {
    $scope.greeting = "I am from ViewController";
  }]);
}(angular));

edited Mar 29, 2016 at 10:06

answered Mar 29, 2016 at 9:17

z.a.

2,7973 gold badges15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hitesh Kumar Over a year ago

I am sorry to trouble you. I am learning these stuff. How will I access the methods which are define in controller of projectDirective in ProjectViewController. Can you please provide a plunkr?

z.a. Over a year ago

you should read the angular docs. you can access directive methods basically within the start and end tags of your directive template or directive tags.

Hitesh Kumar Over a year ago

Hi z.a I have created the plunkr: plnkr.co/edit/kBQd6qjIA2YBJnjcEgod?p=preview I am not able to access variables of projectDirective's controller.

z.a. Over a year ago

I updated the answer. 1- restrict should be EA, A for attribute as directive 2- Since you are transcluding other elements into the directive you need to use this. 3- you have a directive template so you need to use that as your html :)

Hitesh Kumar Over a year ago

Done. Thank you very much. I'll get the answer reviwed from team lead. Let's see how it goes :)

|

Collectives™ on Stack Overflow

AngularJS: Multiple Controllers to a View

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related