Angular JS 错误：$compile:tpload：加载模板失败：答案

【问题标题】：Angular JS Error: $compile:tpload: Failed to load template:Angular JS 错误：$compile:tpload：加载模板失败：
【发布时间】：2014-09-15 15:56:49
【问题描述】：

所以我试图在我的指令中加载模板。该指令是可重用的。但我无法加载模板。我有其他已加载并正常工作的模板。

我得到的错误是：

GET /ClassificationToolkitForGrails/classificationviewer.html 404 (Not Found) angular.js:8521
Error: [$compile:tpload] Failed to load template: classificationviewer.html

包含指令的 javascript 文件：

/**
 * 
 */
var classificationViewModule = angular.module('ald.classificationview',[]);

classificationViewModule.factory('classificationAPI',function(){
    return {
        getClassification:function($http, artifactId){
            //TODO add URL
            var url = "/Classification/getInfo?artifactId="+artifactId
            return $http({
                method: 'GET',
                url: url
            });
        }
    };
});

/*classificationViewModule.controller('testclassification',['$scope','$http',function($scope,$http){
    $http.get("/Classification/getInfo?artifactId=6450").success(function(data){
        $scope.classification = data;       
    })
}]);*/

classificationViewModule.directive('classificationview', function () {
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function ($scope, element, attributes) {

        },
        controller: function ($scope, $http, classificationAPI) {

            classificationAPI.getClassification($http).success(function(data,status){               
                //TODO
                $scope.artifactClassification = data;
            }).error(function(data,status){
                if (404==status){
                    alert("no text");
                } else {
                    alert("bad stuff!");
                }
            });            
        },
        //TODO add template url
        templateUrl: "classificationviewer.html"
    };
});

模板文件：

<div>

Hello world

{{artifactClassification}}


</div>

index.html 文件：

<

!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="layout" content="main"/>
    <title>Classification Toolkit for Grails</title>
    <script type="text/javascript">
        angular.module('classtoolkitApp', [
            'ald.classificationview'
        ]).controller('index', function ($scope) {
        });
    </script>

    <asset:javascript src="ald/classificationview/classificationview.js"/>
</head>
<body >

<div ng-app="classtoolkitApp" ng-controller="index">   

    classification
    <classificationview artifactId=6450/>   

</div>

</body>
</html>

【问题讨论】：

没错，请注意，templateUrl 需要一个来自应用根目录的路径。
不确定我是否关注。所以模板在这个项目使用的插件中。
是的，请注意 Angular 正在您的 web 应用程序的根目录中搜索 .html 文件。如果您将插件放在某个文件夹中，则需要指定从根目录开始的整个路径。说 /common/directives/someplugin/classificationviewer.html。
@KaranShah 您还可以将模板 html 放入与 templateUrl 具有相同 ID 的 ng-template 脚本标签中。如果 Angular 在那里找到它，它不会发出 ajax 请求来获取它
你解决了这个问题吗？

标签： javascript angularjs templates

【解决方案1】：

以下是可能的解决方案 1.检查路径是否正确。检查网络选项卡是否获得 200 OK 2. 检查 html 文件的源选项卡 3. 如果您使用的是 webpack，则将 templateUrl 更改为模板并使用 require 加载文件

【讨论】：

【解决方案2】：

问题是由于某种原因您的 http 服务器在您的工作目录中找不到模板。

你可以直接在浏览器中测试：

<url>/classificationviewer.html

你应该看到404 NOT FOUND，这意味着没有找到这个模板。

您说过，您的其他模板运行良好，因此您可以找到它们在您的工作目录中的位置并将其放置在同一位置。

【讨论】：

【解决方案3】：

如果您直接使用本地系统，则无法正常工作。使用角度服务器加载文件解决您的问题的步骤 1.打开 cmd 提示符并输入 npm install -g http-server 2. 在 cmd 中输入 cd (你的项目文件夹路径) 比如： cd desktop/app/workout 然后 3. 现在在你的文件夹路径中输入 http-server -o 这个命令在你本地机器上的角度服务器上为你的本地页面提供服务

【讨论】：