2
\$\begingroup\$

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">
<head>
    <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>
</head>
<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>
\$\endgroup\$
3
  • \$\begingroup\$ 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? \$\endgroup\$ May 13, 2014 at 10:51
  • \$\begingroup\$ 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. \$\endgroup\$ May 13, 2014 at 14:52
  • \$\begingroup\$ 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. \$\endgroup\$ May 13, 2014 at 14:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.