Lance Larsen - .NET Architect Madison Wisconsin

AngularJS: Sharing Data Between Controllers

Always loved JavaScript and client side scripting ( where appropriate <grin> ) – so when we had a new green field project to start, looked to what the best-in-class technologies were – settled on AngularJS (@angularjs). 

It is a client-side MVC (Model-View-Controller) pattern and it rocks for making SPA (Single-Page-Applications) that emphasize responsiveness.  Take a look at either the AngularJS site, or there are a couple great AngularJS videos on Pluralsight – specifically “AngularJS Fundamentals” and “AngularJS for .NET Developers”.

I know that I have a ton to learn about AngularJS – and wanted to share what I’m learning along the way…

Specifically, have a page that has a list of items to be displayed – and want to filter them by a parameter based on what the user clicked.  So in AngularJS we can separate showing the items to be displayed into one controller – the “CollectionController” – and the filters to be applied into another controller – the “FilterController”.  Found many examples / discussion on how to communicate between the controller, but some seemed to be way overkill or confusing – so got the following code crafted – and wanted to share as it turned out pretty slick! :)

To boot, have the live code running on JSFiddle – which again, if you haven’t played with is WAY awesome!

http://jsfiddle.net/lancelarsen/qjkyM/

So here is the HTML…
 

<div ng-app>
    <div ng-controller="FilterController">
        <div>
            <span ng-repeat="item in filterCollection" 
            ng-class="{ 'selectedClass': $index == selectedIndex }" 
            ng-click="itemClicked($index)">
        [ {{ item }} ]
            </span>
        </div>
    </div>
    <br/>
    <div ng-controller="CollectionController">
        <div> <span 
            ng-repeat="item in itemCollection | filter:sharedData.filterOn">
        [ {{ item }} ]
        </span>
        <br/>Index = {{ sharedData.filterIndex }}</div>
    </div>
</div>

And here is the JavaScript…
 

var app = angular.module('myApp', []);
 
app.service('shared', function () {
 
    //----------------------------------------------------------------------
    // Shared data object - can easily add additional elements
    //----------------------------------------------------------------------
    var sharedData = {
        filterOn: 'A',
        filterIndex: 0
    };
 
    return {
        //----------------------------------------------------------------------
        // Set field methods, corresponding to elements in shared data
        //----------------------------------------------------------------------
        setFilterOn: function (v) {
            sharedData.filterOn = v;
        },
        setFilterIndex: function (v) {
            sharedData.filterIndex = v;
        },
        //----------------------------------------------------------------------
        // Update method retrieves all shared data values
        //----------------------------------------------------------------------        
        update: function () {
            return sharedData;
        }
    }
});
 
app.controller('FilterController', function ($scope, shared) {
 
    //----------------------------------------------------------------------
    // Update method retrieves all shared data values
    //----------------------------------------------------------------------
    $scope.sharedData = shared.update();
 
    $scope.filterCollection = ["A", "B", "C", "D"];
 
    $scope.selectedIndex = 0;
    $scope.itemClicked = function ($index) {
        console.log($index);
        $scope.selectedIndex = $index;
        shared.setFilterIndex($index);
        shared.setFilterOn($scope.filterCollection[$index]);
    }
});
 
app.controller('CollectionController', function ($scope, shared) {
 
    //----------------------------------------------------------------------
    // Update method retrieves all shared data values
    //----------------------------------------------------------------------    
    $scope.sharedData = shared.update();
 
    $scope.itemCollection = 
        ["Item A1", "Item A2", "Item A3", "Item B1", "Item B2", 
         "Item C1", "Item C2", "Item C3", "Item D1", "Item D2"];
});

 
Comments

What about IE8 users? Wanted to go with Angular myself. Ended up choosing Kendo UI because of IE8 issue.

Leave a Reply