AngularJSを初めて使用しているため、私が動作させようとしているものを得るための構造や構文が不明です。これは、AngularJSの既存のサイトを再作成しようとする試みです。 )設計により依存関係と矛盾する可能性のある2つのコントローラを解決する方法
1)カスタムコントローラ(ユニバーサルコントローラから関数を使用している:
私は実際には二つの問題を抱えていると信じています。私は、あるコントローラが他のコントローラを参照できるようにする方法を知る必要があります。適切なスコープと特定の構文が必要であると確信しています。
2)ユニバーサルコントローラ機能を使用するカスタムコントローラ機能を削除すると、それでも機能していないように見えますが、カスタムコントローラが呼び出されると停止します。
コードは以下のは、利便性のために編集: 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);
};
});
'ui-router'を使用して状態や部分を制御することを検討しましたか? – Icycool
これは文字通り私がui-routerについて聞いた最初のものであり、私はあなたが州と部分的に何を意味しているのか分からない。ありがとう、私は今何を研究するのか知っています。 – Kamurai