title: Angular JS Error: $compile:tpload: Failed to load template:
body: <p>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. </p>
  
  <p>The <strong>error</strong> that I am getting is :</p>
  
  <pre><code>GET /ClassificationToolkitForGrails/classificationviewer.html 404 (Not Found) angular.js:8521
  Error: [$compile:tpload] Failed to load template: classificationviewer.html
  </code></pre>
  
  <p>The <strong>javascript</strong> file containing the directive:</p>
  
  <pre><code>/**
   * 
   */
  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"
      };
  });
  </code></pre>
  
  <p>The <strong>template</strong> file :</p>
  
  <pre><code>&lt;div&gt;
  
  Hello world
  
  {{artifactClassification}}
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The <strong>index.html</strong> file :</p>
  
  <pre><code>&lt;
  
  !DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="layout" content="main"/&gt;
      &lt;title&gt;Classification Toolkit for Grails&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          angular.module('classtoolkitApp', [
              'ald.classificationview'
          ]).controller('index', function ($scope) {
          });
      &lt;/script&gt;
  
      &lt;asset:javascript src="ald/classificationview/classificationview.js"/&gt;
  &lt;/head&gt;
  &lt;body &gt;
  
  &lt;div ng-app="classtoolkitApp" ng-controller="index"&gt;   
  
      classification
      &lt;classificationview artifactId=6450/&gt;   
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>