Question

早些时候Angular有点麻烦，但我能够解决这个问题。当然，作为一个新手，我们遇到了更多问题！

是否有人在搜索此错误，但应用其他人尝试过的修补程序并未证明对我有效。

我目前正在尝试使用AngularJS将部分加载到Rails中的显示页面。编辑：我道歉 - 我忘了提到我打算从与所有这些文件相同的目录中的文件加载部分。当前目录树如下：

Directory containing relevant js files and the timer partial

我已经构建了以下代码：

Show.html.erb

<timer-info ng-controller = "CountdownController">

</timer-info>

app.js

'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以及所有这些。

可悲的是，我在页面加载时遇到以下错误：

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

我不知道为什么要对该网址发出请求。有什么想法吗？谢谢！

Answer 1

timerInfo的templateUrl应该是绝对的，如下所示：

templateUrl: '/app/assets/javascripts/timer.html'

这样您就可以从根目录引用到所需的文件。

Answer 2

啊，我能弄明白了。显然，Angular-Rails gem寻找要在app / templates目录中加载的模板。我只需要创建该目录并将模板放在那里。

AngularJS模板未正确加载

2 个答案: