CODEWITHSUNDEEP
angularjsmodel-view-controller
Hitesh Kumar
Hitesh Kumar

Reputation: 3698

AngularJS: Multiple Controllers to a View

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.

Upvotes: 0

Views: 845

Answers (1)

z.a.
z.a.

Reputation: 2777

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));

Upvotes: 1

Related Questions