以前のAngularで問題が少しありましたが、その問題を解決できました。もちろん、初心者であり、我々はより多くの問題にぶつかった!AngularJSテンプレートが正しく読み込まれていない
このエラーの周りをいくつか検索しましたが、他の人が試した修正を適用しても効果が実証されていません。
現在、AngularJSを使用してRailsでショーページに部分的にロードしようとしています。 編集:私は謝罪する - 私は、これらのすべてのファイルと同じディレクトリにあるファイルから部分的にロードするつもりであることに言及するのを忘れてしまった。
Show.html.erb
<timer-info ng-controller = "CountdownController">
</timer-info>
を
app.js:Directory containing relevant js files and the timer partial
私は次のコードをアウト構築しました:次のように現在のディレクトリツリーがあります
'use strict';
var myApp = angular.module("summoners-universe", ['ngRoute'])
directives.js
'use strict';
myApp.directive("timerInfo", function(){
return {
restrict: "E",
templateUrl: 'app/assets/javascripts/timer.html'
};
});
controllers.js
'use strict';
myApp.controller('CountdownController',
["$scope", "$http", "$routeParams",
function($scope, $http, $routeParams){
console.log($routeParams);
}]);
最終的にカウントダウンタイマーを表示しますが、今のところ、私はちょうど私が私のrouteParamsを得ることができることを確認したかっただろう、このコントローラそしてすべて。 get要求は、そのURLに行われている理由を私は知らない
angular.self-208d6d1….js?body=1:11757 GET http://localhost:3000/games/app/assets/javascripts/timer.html 404 (Not Found)(anonymous function) @ angular.self-208d6d1….js?body=1:11757sendReq @ angular.self-208d6d1….js?body=1:11518serverRequest @ angular.self-208d6d1….js?body=1:11228processQueue @ angular.self-208d6d1….js?body=1:15962(anonymous function) @ angular.self-208d6d1….js?body=1:15978Scope.$eval @ angular.self-208d6d1….js?body=1:17230Scope.$digest @ angular.self-208d6d1….js?body=1:17046Scope.$apply @ angular.self-208d6d1….js?body=1:17338bootstrapApply @ angular.self-208d6d1….js?body=1:1750invoke @ angular.self-208d6d1….js?body=1:4666doBootstrap @ angular.self-208d6d1….js?body=1:1748bootstrap @ angular.self-208d6d1….js?body=1:1768angularInit @ angular.self-208d6d1….js?body=1:1653(anonymous function) @ angular.self-208d6d1….js?body=1:30864fire @ jquery.self-4e23968….js?body=1:3188self.fireWith @ jquery.self-4e23968….js?body=1:3318jQuery.extend.ready @ jquery.self-4e23968….js?body=1:3537completed @ jquery.self-4e23968….js?body=1:3553
angular.self-208d6d1….js?body=1:13551 Error: [$compile:tpload] Failed to load template: app/assets/javascripts/timer.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.5.5/$compile/tpload?p0=app%2Fassets%2Fjavascripts%2Ftimer.html&p1=404&p2=Not%20Found
at angular.self-208d6d1….js?body=1:69
at handleError (angular.self-208d6d1….js?body=1:18979)
at processQueue (angular.self-208d6d1….js?body=1:15962)
at angular.self-208d6d1….js?body=1:15978
at Scope.$eval (angular.self-208d6d1….js?body=1:17230)
at Scope.$digest (angular.self-208d6d1….js?body=1:17046)
at Scope.$apply (angular.self-208d6d1….js?body=1:17338)
at done (angular.self-208d6d1….js?body=1:11573)
at completeRequest (angular.self-208d6d1….js?body=1:11779)
at XMLHttpRequest.requestLoaded (angular.self-208d6d1….js?body=1:11712)(anonymous function) @ angular.self-208d6d1….js?body=1:13551(anonymous function) @ angular.self-208d6d1….js?body=1:10226processQueue @ angular.self-208d6d1….js?body=1:15970(anonymous function) @ angular.self-208d6d1….js?body=1:15978Scope.$eval @ angular.self-208d6d1….js?body=1:17230Scope.$digest @ angular.self-208d6d1….js?body=1:17046Scope.$apply @ angular.self-208d6d1….js?body=1:17338done @ angular.self-208d6d1….js?body=1:11573completeRequest @ angular.self-208d6d1….js?body=1:11779requestLoaded @ angular.self-208d6d1….js?body=1:11712XMLHttpRequest.send (async)(anonymous function) @ angular.self-208d6d1….js?body=1:11757sendReq @ angular.self-208d6d1….js?body=1:11518serverRequest @ angular.self-208d6d1….js?body=1:11228processQueue @ angular.self-208d6d1….js?body=1:15962(anonymous function) @ angular.self-208d6d1….js?body=1:15978Scope.$eval @ angular.self-208d6d1….js?body=1:17230Scope.$digest @ angular.self-208d6d1….js?body=1:17046Scope.$apply @ angular.self-208d6d1….js?body=1:17338bootstrapApply @ angular.self-208d6d1….js?body=1:1750invoke @ angular.self-208d6d1….js?body=1:4666doBootstrap @ angular.self-208d6d1….js?body=1:1748bootstrap @ angular.self-208d6d1….js?body=1:1768angularInit @ angular.self-208d6d1….js?body=1:1653(anonymous function) @ angular.self-208d6d1….js?body=1:30864fire @ jquery.self-4e23968….js?body=1:3188self.fireWith @ jquery.self-4e23968….js?body=1:3318jQuery.extend.ready @ jquery.self-4e23968….js?body=1:3537completed @ jquery.self-4e23968….js?body=1:3553
:
悲しいことに、私は、ページのロード時に次のエラーでヒットしています。何かご意見は?ありがとうございました!
templateUrl: '/app/assets/javascripts/timer.html'
あなたが目的のファイルまでのルートディレクトリから参照している。この方法:
ディレクティブの 'timerInfo'から起動します。 –
したがって、directivesファイルと同じディレクトリにあるtimer.htmlファイルをレンダリングするためにtemplateUrlを取得するにはどうすればよいですか?私は適切な情報で私のOPを更新します。 –
templateUrlでは、接頭辞「/」が付いたURLはドメインとの相対的なもので、接頭辞「/」はなく、メイン(「index.html」)ページまたはベースURLからの相対パスになります(html5モード)。したがって、html5モードがない場合、index.htmlはどこにあるかによって異なります。 –