AngularJS Multiple views with shared logic design pattern

Question

I'm using ui-router and my layout is divided into 2 ui-views, side-bar and main content

the side-bar offers options that changes the main content model (altering values, setting filters) and that's a problem because as far as I understand they can never share same controller (instance)

at this point there are two solutions I'm considering, 1. Working with one view moving the sidebar into the main view that way they will reside within a single controller instance, It's a bit ugly but still a solution 2. communicate between controllers with a messaging, invoking whatever needed in that disconnected matter

I don't like neither of those solutions, I'll be happy to get your design proposals

current routing def example (mind that same layout is common for my application and in used repeatedly:

$stateProvider.state('home', {
                url: "/home",
                views: {
                    main: {               
                        templateUrl:"homeTemplate.html",
                        controller: "HomeController"
                    },
                    sidebar: {templateUrl: "homeSidebarTemplate.html"}
                }
            })

Well, after battling this and almost reorganising the layout I've found a library that does exactly what I needed, rendering boundable section outside of the controller scope while leaving it connected to the same scope of that single controller (in my case): http://paulstovell.com/blog/angular-layouts-and-sections — OfirYaron, Jul 07 '15 at 13:10

Elger Mensonides · Accepted Answer · 2015-07-06T11:02:00.807

1

Take a look at angular services

You can use them for these purposes. A service is a singleton in which you can share data between any module. Put your data into the service and use it as a model in your main view and side bar.

For example:

angular.module('myApp.someNamespace', [])
  .factory('someService', function () {

  var service = {};
  service.myList = {1,2,3};
  service.myMenu = {'apples', 'oranges', 'pears'}

  service.addToList = function(number) {
   service.myList.push(number);
  }
  return service;
});

inject this service into your controller and sidebar directive:

angular.module('myApp.myControllers', [])
    .controller('myCtrl', function ($scope, someService) {

    $scope.model = someService;
});

In your view bind to your service variables/methods:

<div ng-repeat="number in model.myList">
   <input type="number" ng-model="number"/>
</div>
<input type="number" ng-model="newNumber"/>
<button ng-click="model.addToList(newNumber)">Add</button>

Another advantage of using this pattern is that your views will stay where you were when navigating back and forth (more stateful), because it gets the data from your singleton service. Also you'd only need to get the data from your api once (until you refresh your browser ofcourse).

edited Jul 06 '15 at 11:02

answered Jul 06 '15 at 07:39

Elger Mensonides

6,930
6
46
69

I know services, thought about using a service that both controllers get injected with to share the data, but as a design it'll stick as a problem cause it will require duplications and de-centralised logic. – OfirYaron Jul 06 '15 at 07:51
What do you mean exactly with duplicate and decentralised? Name your services appropriately and you have the opposite. Reusable logic centralised. – Elger Mensonides Jul 06 '15 at 07:54
I mean that for each route (and I'll have dozens) I'll have two controllers (one for sidebar and one for main) and another service to share the model.(aside for the service I already have for the REST actions) now both controllers will have duplications for working on top of the state I like the solution, but fear that it'll require me of adding UI logic or helper method to reside within a service so they are written once and the service to knowing the UI sound not right – OfirYaron Jul 06 '15 at 08:03
You should move your logic from the controller to your service. That way you can re-use your logic much better. Also, don't inject your rest services into your controller, rather in your service. This way you can persist data much easier. – Elger Mensonides Jul 06 '15 at 08:07
1

In angular, most UI logic will reside in your views anyway, with filters and directives. The rest can go into your service. Try it, you'll see it will fit nicely in angular. – Elger Mensonides Jul 06 '15 at 08:09

AngularJS Multiple views with shared logic design pattern

1 Answers1