1

Is it more effective to use a Service or rely on Scope Inheritance when updating parameters outside an AngularJS ng-view?

I have an AngularJS page with an ng-view and a common header. When moving between the ng-views I would like to:

  1. update the common header title
  2. select the appropriate navigation menu item.

In order to do this I've read two common solutions. The first is to provide a Service that can pass variables between controllers. A simple and straight-forward solution described in many places, including here: AngularJS: How can I pass variables between controllers?

The second method I've found was to take advantage of Scope Inheritance and wrap my ng-view in a parent controller, like so:

<body ng-controller="MainCtrl">
  <!-- stuff -->

  <h1>{{ common.pageTitle }}</h1>
  <ng-view></ng-view>

  <!-- more stuff -->
</body>

Then in my controllers I can do the following:

myApp.controller('MainCtrl', function ($scope)
{
    $scope.common = [];

    $scope.common.pageTitle = "Set by MainCtrl";
});

myApp.controller('SplashCtrl', function ($scope)
{
    $scope.common.pageTitle = "Set by SplashCtrl!"
});

Is there a performance hit between using one over the other? Am I going to discover a hidden "gotcha" if I use one, that I haven't realized yet?

Community
  • 1
  • 1
Nicholas Pappas
  • 10,439
  • 12
  • 54
  • 87
  • 1
    The approach with a MainCtrl is very bad look at http://stackoverflow.com/a/21428102/356380 .A good solution imo is take a look at http://stackoverflow.com/a/21488757/356380 look for my last UPDATE – Whisher Feb 10 '14 at 20:01

1 Answers1

1

I recommend using services or an even pattern over inheritance. It's more difficult to 'figure out' where things are coming from and what is modifying what unless you have some explicit way of stating that

As far a performance goes, I'm not sure what would be faster, however don't worry about performance until you need to, then look for a solution to your specific performance issue

If you wanted to go the event pattern route then you could have your controller broadcast it did something

$rootScope.broadcast('eventname', { event data });

and consume the message like this in your menu/main controller

$scope.$on('eventname', function(event, data){

      // update menu state...

});

The hidden 'gotcha' for me was after going several levels deep in scope inheritance I found that when I started writing my test code I had to instantiate all of the 'parent' controllers and my tests got overly complex very quick

Mark-Sullivan
  • 186
  • 5