I am pretty new to angular and have implemented a traffic light logic for practice and would just like to see if I can improve it? Any suggestions on best practices and logic setup would be great.
Stoplight.js
var appCityRoads = angular.module('cityRoads', []).run(function () { });
appCityRoads.controller('mainController', ["$scope", "$interval", "$timeout", "stopLightService", function ($scope, $interval, $timeout, stopLightService) {
$scope.activeTrafficDirection = stopLightService.getDirection();
$scope.northSouthGo = true;
$scope.eastWestGo = false;
// Toggles the visual stop lights.
$scope.toggleStopLights = function () {
if ($scope.interval) {
alert("Stop interval traffic first");
} else {
$scope.toggleTrafficDirection();
$scope.toggleLights();
}
}
// Toggles the flow of traffic and sets the current active traffic direction using the service.
$scope.toggleTrafficDirection = function () {
stopLightService.toggleTrafficDirection($scope.activeTrafficDirection);
$scope.activeTrafficDirection = stopLightService.getDirection();
}
// Toggles which lights will turn green or red.
$scope.toggleLights = function () {
if ($scope.activeTrafficDirection == "NS") {
$scope.northSouthGo = true;
} else {
$scope.northSouthGo = false;
}
$scope.eastWestGo = !$scope.northSouthGo;
}
// Starts the interval traffic process.
$scope.startIntervalTraffic = function () {
$scope.interval = $interval(function () {
// Switch the flow of traffic
$scope.toggleTrafficDirection();
// Onward traffic flow about to go and the opposite getting ready to stop.
$timeout(function () {
if ($scope.activeTrafficDirection == "NS") {
$scope.eastWestReadyToStop = true;
} else {
$scope.northSouthReadyToStop = true;
}
// Onward traffic went and the opposite stopped.
$timeout(function () {
$scope.toggleLights();
$scope.northSouthReadyToStop = false;
$scope.eastWestReadyToStop = false;
}, 2000);
}, 1000);
}, 5000);
}
// Stops the interval traffice process.
$scope.stopIntervalTraffic = function () {
$interval.cancel($scope.interval);
$scope.interval = false;
}
}]);
appCityRoads.service('stopLightService', function() {
// Initial direction is NS
// NS = North/South
// EW = East/West
var trafficDirection = "NS";
// Togles the traffic direction
var toggleTrafficDirection = function () {
if (trafficDirection === "NS") {
trafficDirection = "EW";
} else {
trafficDirection = "NS";
}
}
// Returns the current direction of traffic.
var getDirection = function() {
return trafficDirection;
}
return {
toggleTrafficDirection: toggleTrafficDirection,
getDirection: getDirection
}
});
appCityRoads.directive('stopLightDirective', function () {
return {
templateUrl: function (element, attribute) {
return './templates/stoplight-' + attribute.direction + '.html';
}
}
});
appCityRoads.directive('stopLightSwitchDirective', function () {
return {
template: function (element, attribute) {
var button = angular.fromJson(attribute.buttonInfo);
return '<button class="btn btn-regular" ng-click="' + button.type + '();">' + button.name + '</button>'
}
}
});
StopLight.html:
<html ng-app="cityRoads" ng-controller="mainController">
<head>
<link rel="stylesheet" href="../StopLight.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-view>
<h1>Stop Light Example</h1>
{{activeTrafficDirection}}
<div class="clearfix">
<div stop-light-directive direction="north-south"></div>
<div stop-light-directive direction="east-west"></div>
<div stop-light-switch-directive button-info='{ "type" : "toggleStopLights", "name" : "Toggle Stop Light" }'></div>
<div stop-light-switch-directive button-info='{ "type" : "startIntervalTraffic", "name" : "Start Interval Stop Light" }'></div>
<div stop-light-switch-directive button-info='{ "type" : "stopIntervalTraffic", "name" : "Stop Interval Light" }'></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="../StopLight.js"></script>
</body>
</html>
stoplight-east-west.html
<div class="col-md-1">
<h4>East/West</h4>
<div class="stop-light">
<div class="stop-light pull-left">
<div id="green-light" ng-class="{'active' : eastWestGo}" class="light-bulb"></div>
<div id="yellow-light" ng-class="{'active' : eastWestReadyToStop}" class="light-bulb"></div>
<div id="red-light" ng-class="{'active' : !eastWestGo}" class="light-bulb"></div>
</div>
</div>
stoplight-north-south.html
<div class="col-md-1">
<h4>North/South</h4>
<div class="stop-light pull-left">
<div class="stop-light pull-left">
<div id="green-light" ng-class="{'active' : northSouthGo}" class="light-bulb"></div>
<div id="yellow-light" ng-class="{'active' : northSouthReadyToStop}" class="light-bulb"></div>
<div id="red-light" ng-class="{'active' : !northSouthGo}" class="light-bulb"></div>
</div>
</div>
