So I am trying to load the template in my directive. This directive is reusable. But I am failing to load the template. I have had other templates which are loaded and work properly.
The error that I am getting is :
GET /ClassificationToolkitForGrails/classificationviewer.html 404 (Not Found) angular.js:8521
Error: [$compile:tpload] Failed to load template: classificationviewer.html
The javascript file containing the directive:
/**
*
*/
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"
};
});
The template file :
<div>
Hello world
{{artifactClassification}}
</div>
The index.html file :
<
!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>
So I am trying to load the template in my directive. This directive is reusable. But I am failing to load the template. I have had other templates which are loaded and work properly.
The error that I am getting is :
GET /ClassificationToolkitForGrails/classificationviewer.html 404 (Not Found) angular.js:8521
Error: [$compile:tpload] Failed to load template: classificationviewer.html
The javascript file containing the directive:
/**
*
*/
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"
};
});
The template file :
<div>
Hello world
{{artifactClassification}}
</div>
The index.html file :
<
!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>
3 Answers
Reset to default 6Following are the possible solution 1. check for the correct path. Check the network tab whether you are getting 200 OK 2. check in the sources tab for the html file 3. if you are using webpack then change the templateUrl to template and use require to load the file
The problem is that for some reason your http server can't find template in your working directory.
You can test it directly in browser:
<url>/classificationviewer.html
And you should see 404 NOT FOUND, which means that this template was not found.
You said, that your other templates are working great, so you can find where are they located in your working directory and place this one at the same location.
if you are using your local system directly then does not work. use the angular server load the file step to solve your problem 1.open cmd prompt and type npm install -g http-server 2. In cmd type cd (your project folder path) like: cd desktop/app/workout then 3. now in your folder path type http-server -o this command serve your local page on the angular server on your local meachine
ng-templatescript tag with same ID as templateUrl. If angular finds it there, it won't make ajax request to get it – charlietfl Commented Sep 15, 2014 at 16:17