# AngularJS with global data and "service" / using $watch on$rootScope

I am currently learning angular.js.

The following is an example I came up with. The goal:

• An editor for a dict, the dict format is: {key: [type, data]}
• A view of the same data
• The "type" should be validated. I use two types: "string" (can be anything) and "greeting" (a string that starts with hello)
• Don't care for minify compatibility

The first solution I came up with did the validation inside the controllor of the editor view - but I would prefer it to be global. Every time the global data changes - no matter from where - the validation should be run.

<!doctype html>
<html lang="en">
<script src="angular.js"></script>
<script>
'use strict';

var testApp = angular.module('testApp', []);

testApp.factory('Data', function ($rootScope) {$rootScope.data = {'A String': ['string', 'Hello Foo'], 'A Greeting': ['Greeting', 'Hello Bar']};
$rootScope.validation = {}; // validate data.$rootScope.$watch('data', function (newValue, oldValue) { for (var key in newValue) { var value = newValue[key]; if (value[0] == 'string') {$rootScope.validation[key] = true;
} else if (value[0] == 'Greeting') {
$rootScope.validation[key] = value[1].indexOf('Hello') == 0; } else { console.log('error'); } } }, true); return$rootScope.data;
});

testApp.controller('dataViewCtrl', function ($scope, Data) { // Data must be injected somewhere so the factory is run. // So even though this function does nothing the "Data" argument // must be somewhere. What better way is there to initialize global data? // i might do //$scope.data = Data;
// but is there actually a point of doing so?
});

testApp.controller('dataEditorCtrl', function () {
});

</script>
<body ng-app="testApp">

<h2>The Editor</h2>

<div ng-controller="dataEditorCtrl">
<table>
<tr ng-repeat="(key, value) in data">
<td>{{ key }}</td>
<td><input ng-model="value[1]"></td>
<td ng-if="validation[key]">ok</td>
<td ng-if="!validation[key]">NOK {{ !validation[key] }}</td>
</tr>
</table>
</div>

<h2>Some View</h2>

<div ng-controller="dataViewCtrl">
<table>
<tr ng-repeat="(key, value) in data">
<td>{{ key }}</td>
<td>{{ value[1] }}</td>
</tr>
</table>
</div>

</body>
</html>

• Welcome to Code Review! I find your question a little bit unclear. How does it work at the moment? Is there some desired feature you want but have problems implementing? May 13 '14 at 10:51
• Hi Simon! The end result is as expected. I posted it here to get feedback on the way it works. It feels hacky. Especially the factory - it exists purely to execute something inside Angular on startup and to have a "background service" that watches for changes on \$rootScope - but from reading about Angular that is not what a "service" (in angular jargon) is meant to do. Or is it? Also see the comment inside dataViewCtrl. May 13 '14 at 14:52
• I honestly don't know anything about angular, but I've up-voted your question. I hope someone more familiar with angular can help you out. May 13 '14 at 14:57