Being new to AngularJS, I'm not sure the structure or syntax to get what I'm trying to do to work. This is an attempt to recreate an existing site in AngularJS.
I believe I actually have two problems:
1) The Custom controller (by design) is using a function from the Universal controller. I need to know how to allow one controller reference the other. I'm sure it involves proper scoping and a particular syntax.
2) When I remove the Custom Controller function that uses the Universal controller function, it still doesn't seem to work, it stops when the Custom controller is called.
Code follows, edited for convenience: HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script language="JavaScript" src="./Universal.js" runat="server"></script>
<script language="JavaScript" src="./Custom.js" runat="server"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="./Main.css" rel="stylesheet" type="text/css">
</head>
<body id="idBody" ng-app="Universal">
<table id="idTableMain">
<tr id="idHeaderRow">
<td id="idHeaderRowCenter" colspan="3" ng-controller="UniversalController">
{{TitlePicture()}}
</td>
</tr>
<tr id="idNavigationRow">
<td id="idNavigationBar" colspan="3" ng-controller="UniversalController">
{{NavBar()}}
</td>
</tr>
<tr id="idCenterRow" ng-controller="UniversalController">
<td id="idCenterRowLeft" ng-controller="CustomController">
{{GetNavigationHeader()}}
<any>
{{GetNavigation(0)}}
</any>
</td>
<td id="idCenterRowMain">
<any ng-controller="CustomController">
{{Title(0)}}
</any>
</td>
<td id="idCenterRowRight">
{{GetInformationHeader()}}
{{GetInformation()}}
</td>
</tr>
<tr id="idFooterRow">
<td id="idFooterMain" colspan="3">
<p id="idFooterContent" ng-controller="UniversalController">
{{Footer()}}
</p>
<p id="idFooterManagement" ng-controller="UniversalController">
{{WebMaster()}}
</p>
</td>
</tr>
</table>
</body>
</html>
Universal.js:
var Universal = angular.module("Universal", []);
Universal.controller("UniversalController", ['$scope', '$sce', function ($scope, $sce)
{
$scope.WriteHeader = function()
{
$scope.vResult = "<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>";
$scope.vResult += "<link href='"+GetPath(vLevel-1)+"moo.css' rel='stylesheet' type='text/css'>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.TitlePicture = function(vLevel)
{
$scope.vResult = "<img src='"+$scope.GetPath(vLevel)+"logo_HouseThatKamuraiBuilt_blueonblack.jpg' >";
return $sce.trustAsHtml($scope.vResult);
};
$scope.NavBar = function()
{
$scope.vResult = "<a href='"+GetPath(vLevel)+"Index.html'>Home</a>";
$scope.vResult += "<a href='"+GetPath(vLevel)+"Section1/Index.html'>Web Programming</a>";
$scope.vResult += "<a href='"+GetPath(vLevel)+"Section2/Index.html'>Private Projects</a>";
$scope.vResult += "<a href='"+GetPath(vLevel)+"Section3/Index.html'>Downloadable Projects</a>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.GetNavigationHeader = function()
{
$scope.vResult = "<h4>";
$scope.vResult += "Navigation";
$scope.vResult += "</h4>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.GetInformationHeader = function()
{
$scope.vResult = "<h4>";
$scope.vResult += "Information";
$scope.vResult += "</h4>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.GetInformation = function()
{
$scope.vResult = "This was written in AngularJS.<br><br>";
$scope.vResult += "Other versions of this page are here:<br>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.GDR = function()
{
$scope.vResult = "<a href='http://htkb.dyndns.org/Section3/downloads/GDR.zip'>You can download my Games Development Report here.</a></br>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.WinRAR = function()
{
$scope.vResult = "<a href='http://htkb.dyndns.org/Section3/downloads/wrar371.exe'>You may need WinRar to open zip files from this site.</a></br>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.Footer = function()
{
$scope.vResult = "© Copyright 2012 All rights reserved<br>";
$scope.vResult += "House That Kamurai Built";
return $sce.trustAsHtml($scope.vResult);
};
$scope.WebMaster = function()
{
$scope.vResult = "Website managed by Kamurai.";
return $sce.trustAsHtml($scope.vResult);
};
$scope.GetPath = function(vLevel)
{
if(vLevel <= 0)
{
$scope.vResult = "./";
}
else if(vLevel == 1)
{
$scope.vResult = "../";
}
else if(vLevel == 2)
{
$scope.vResult = "../../";
}
else if(vLevel == 3)
{
$scope.vResult = "../../../";
}
else if(vLevel == 4)
{
$scope.vResult = "../../../../";
}
else if(vLevel == 5)
{
$scope.vResult = "../../../../../";
}
else if(vLevel == 6)
{
$scope.vResult = "../../../../../../";
}
else if(vLevel == 7)
{
$scope.vResult = "../../../../../../../";
}
return $scope.vResult;
};
}]);
Custom.js:
angular.module('Universal', []).controller('CustomController', ['$scope', '$sce', function ($scope, $sce)
{
$scope.Navigation = function(vLevel)
{
$scope.vResult = "";
$scope.vResult += "<span class='navlink'>";
$scope.vResult += "<a href='"+$scope.GetPath(vLevel)+"AboutUs.html'>About Us</a>";
$scope.vResult += "</span>";
$scope.vResult += "<br>";
$scope.vResult += "<span class='navlink'>";
$scope.vResult += "<a href='"+$scope.GetPath(vLevel)+"Media.html'>Media</a>";
$scope.vResult += "</span>";
$scope.vResult += "<br>";
$scope.vResult += "<span class='navlink'>";
$scope.vResult += "<a href='"+$scope.GetPath(vLevel)+"Minecraft.html'>Minecraft!</a>";
$scope.vResult += "</span>";
$scope.vResult += "<br>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.Title = function(vPage)
{
$scope.vResult = "";
$scope.vResult += "<title>";
if(vPage <= 0)
{
$scope.vResult += "HTKB Home Page";
}
$scope.vResult += "</title>");
return $sce.trustAsHtml($scope.vResult);
};
$scope.Header = function(vPage)
{
$scope.vResult = "";
if(vPage == 0)
{
$scope.vResult += "<h2>";
$scope.vResult += "<u>";
$scope.vResult += "Welcome to the House That Kamurai Built!";
$scope.vResult += "</u>";
$scope.vResult += "</h2>";
}
return $sce.trustAsHtml($scope.vResult);
};
$scope.Content = function(vPage)
{
$scope.vResult = "";
$scope.vResult += "<p align='left'>";
if(vPage == 0)
{
$scope.vResult += "The House That Kamurai Built is an entertainment company with the primary focus ";
$scope.vResult += "of increasing awesome by stimulating intelligent conversation and entertainment via discussion and ";
$scope.vResult += "game design.<br>";
$scope.vResult += "Increase the Awesome with us!<br>";
}
$scope.vResult += "</p>";
return $sce.trustAsHtml($scope.vResult);
};
$scope.Versions = function(vPage)
{
$scope.vResult = "";
if(vPage == 0)
{
$scope.vResult += "<a href=\'http://htkb.dyndns.org/index.html\'>HTML</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org/Javascript/index.html\'>HTML Javascript</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org:81/ASP/index.asp\'>ASP Javascript</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org:81/ASPNET/index.aspx\'>ASP.NET Javascript</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org/index.shtml\'>Perl</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org:8080/JSPApplication/index.jsp\'>JSP</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org:8080/JSFApplication/index.xhtml\'>JSF</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org:81/WebApplication/index.cshtml\'>ASP.NET Web App</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org:81/WebForm/index.aspx\'>ASP.NET Webform</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org:81/MVC/Main/index\'>ASP.NET MVC App</a><br>";
$scope.vResult += "<a href=\'http://htkb.dyndns.org/SSI/index.html\'>Apache SSI</a><br>";
}
return $sce.trustAsHtml($scope.vResult);
};
});
I get that I'm new to AngularJS and maybe what I'm trying to do isn't necessarily best practices or utilizing the full power of Angular, but I did find a work around for what I'm trying to do here.
While the ui-router and $broadcast suggests are probably good ways to go for more complicated scenarios, mine a rather simple scenario.
On the HTML side, I ended up using tags with ng-bind-html to get the information to my view from the controllers. Using ng-controller for each of these tag sets, I'm able to specify controllers without conflicts.
In order to have CustomController refer to the UniversalController, I just made the desired function a normal Javascript function, outside the controller, but in the same file. This allows other scripts that are included alongside it to use that function without need a $scope as you would for an actual event.