Angular modular aop

by justinwyllie

HTML

<div ng-app="myApp" ng-controller="main">

    <div class="nav" >
        <button ng-click="loadModule('game1')">Load Game 1</button>
        <button ng-click="loadModule('game2')">Load Game 2</button>
    </div>



    <div class="contentArea">
        <p>now playing {{activeGame}} </p>
 
    
            <div class="game" ng-show="show" ng-controller="game1Controller">
                <div>
                    game 1 : {{title}}
                </div>
            </div>

    
            <div class="game" ng-show="show" ng-controller="game2Controller">
                <div>
                    game 2 : {{title}}
                </div>
            </div>

    
    </div>
        
</div>

CSS

.nav
{
    width: auto;
    border: 1px solid #000000;
    float: left;
    
}

.contentArea
{
    font-family: arial, hgevetica, sans-serif;
    float: left;
    background-color: #FFCCFF;
    width: 300px;
    min-height: 500px;
    padding: 10px;
  
}

.contentArea p:first-child
{
    background-color: #CC3399;
    padding: 5px;
}    


button
{
    display: block;   
}

.game
{
    margin-top: 20px;   
}   
}

JavaScript

var game1 = angular.module("game1", []);
var game2 = angular.module("game2", []);

                         
var app = angular.module("myApp", ['game1', 'game2']);

app.service('appService', function () {
    
        var show;
    
        return {
            getShow: function () {
                return show;
            },
            setShow: function(value) {
                show = value;
            }
        };
}).controller("main", function($scope, appService) {
    
    $scope.activeGame = null;
      
    
    $scope.loadModule = function(whc) {
        $scope.activeGame = whc;  
        appService.setShow(whc);
    }
    
});



/* code for game 1 module */
game1.controller("game1Controller", function($scope, appService) {
    
    $scope.title = "asteroids";
    $scope.show = false;
    $scope.service = appService;
    
    $scope.$watch('service.getShow()', function(newVal) {
        if (newVal === "game1") {
            $scope.show = true;   
        } else {
            $scope.show = false; 
        }
           
      });
    
});




/* code for game 2 module */
game2.controller("game2Controller", function($scope, appService) {
    
     $scope.title = "meteors";
     $scope.show = false;
     $scope.service = appService;
    
     $scope.$watch('service.getShow()', function(newVal) {
          if (newVal === "game2") {
            $scope.show = true;   
        } else {
            $scope.show = false; 
        }
      });
    
});