Angular Configuration

by rtcherry

HTML

<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div id="first_app" ng-controller="TestController">
    <span>{{getData()}} (<a ng-click="showAlert()">show alert</a>)</span>
</div>
<div id="second_app" ng-controller="TestController">
    <span>{{getData()}} (<a ng-click="showAlert()">show alert</a>)</span>
</div>

JavaScript

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

testApp.controller('TestController', ['$scope', 'Config', function($scope, Config) {
    $scope.getData = function() {
        return Config.getValue('data');
    };
    $scope.showAlert = function() {
        alert('Config alert value: ' + Config.getValue('alert'));
    };
}]);

testApp.service('Config', ['$window', function($window) {
    var configData = angular.extend({}, $window.APP_CONFIG);
    return {
        getValue: function(key) {
            return configData[key];
        }
    }
}]);

angular.element(document).ready(function () {
    window.APP_CONFIG = { data: 'First!', alert: 'Alert!' };
    angular.bootstrap($('#first_app')[0], ['testApp']);
    window.APP_CONFIG = { data: 'Second!', alert: 'Another alert!' };
    angular.bootstrap($('#second_app')[0], ['testApp']);
});