title: AngularJS: Uncaught Error: $injector:modulerr Failed to instantiate module
body: <p>I am trying to include several directives in as dependencies. Everything was working fine until I added a new directive called classificationview. its just an directive which will i will use somewhere later.
  I am getting the error of  :</p>
  
  <pre><code>Uncaught Error: [$injector:modulerr] Failed to instantiate module mainapp due to:
  Error: [$injector:modulerr] Failed to instantiate module ald.classificationview due to:
  Error: [$injector:nomod] Module 'ald.classificationview' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
  </code></pre>
  
  <p>The  <strong>classification</strong> directive:</p>
  
  <pre><code>/**
   * 
   */
  var classificationViewModule = angular.module('ald.classificationview',[]);
  
  classificationViewModule.factory('classificationAPI',function(){
      return {
          getClassification:function($http){
              //TODO add URL
              var url = "/Classification?artifactId=6450"
              return $http({
                  method: 'GET',
                  url: url
              });
          }
      };
  });
  
  classificationViewModule.directive('classification', 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 Add required binding
                  $scope.artifactClassification = data;
              }).error(function(data,status){
                  if (404==status){
                      alert("no text");
                  } else {
                      alert("bad stuff!");
                  }
              });            
          },
          //TODO add template url
          templateUrl: "classificationview.html"
      };
  });
  </code></pre>
  
  <p>The <strong>main.js</strong> file :</p>
  
  <pre><code>var theApp = angular.module('mainapp', [
      'ald.documentlist',    
      'ald.hierarchylist',
      'ald.hierarchyviewer',
      'ald.documentdisplay',
      'ald.artifactlist',
      'ald.classificationview',
      'ngRoute'
  ]);
  
  var controllers = {};
  var directives = {};
  
  controllers.tabsController = function ($scope, $location, $http) {
      $scope.onClickTab = function (tabUrl) {
          $scope.removePadding();
          $location.$$search = {};
          if (tabUrl == 'Hierarchy') {
              $location.path("/hierarchy");
          }
          else if (tabUrl == 'Artifacts') {
              $location.path("/artifacts");
          }
          else {
              $location.path("/documents");
          }
      };
      $scope.removePadding = function() {
          $("#documentTab").css("padding", "0px");
          $("#hierarchyTab").css("padding", "0px");
          $("#artifactTab").css("padding", "0px");
      };
  };
  
  controllers.IndexController = function ($scope, $http) {
  };
  
  controllers.DocumentsCentricViewCtrl = function ($scope, $http) {
      $("#tabs").tabs( "option", "active", 0 );
  };
  
  controllers.DocumentDisplayViewCtrl = function ($scope, $http) {
      $("#tabs").tabs( "option", "active", 0 );
  };
  
  controllers.HierarchyCentricViewCtrl = function ($scope, $http) {
      $("#tabs").tabs( "option", "active", 1 );
  };
  
  controllers.ArtifactsCentricViewCtrl = function ($scope, $http) {
      $("#tabs").tabs( "option", "active", 2 );
  };
  
  directives.panelTabs = function() {
      return {
          restrict: 'A',
          link: function($scope, elm, attrs) {
              var jqueryElm = $(elm[0]);
              $(jqueryElm).tabs()
              $scope.removePadding();
          }
      };
  };
  
  theApp.controller(controllers);
  theApp.directive(directives);
  
  theApp.config(['$routeProvider',
      function($routeProvider) {
          $routeProvider.
              when('/documents', {
                  templateUrl: 'documentscentricview.html',
                  controller: 'DocumentsCentricViewCtrl'
              }).
              when('/hierarchy', {
                  templateUrl: 'hierarchycentricview.html',
                  controller: 'HierarchyCentricViewCtrl'
              }).
              when('/artifacts', {
                  templateUrl: 'artifactscentricview.html',
                  controller: 'ArtifactsCentricViewCtrl'
              }).
              when('/documents/:doc', {
                  templateUrl: 'documentdisplay.html',
                  controller: 'DocumentDisplayViewCtrl'
              }).
              otherwise({
  /*
                  templateUrl: 'indexview.html',
                  controller: 'IndexController'
  */
                  redirectTo: '/documents'
              });
      }]); 
  </code></pre>
  
  <p>The source of the javascript file is given in <strong>index</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;The Analyzer Engine and SDX Analysis UI&lt;/title&gt;
      %{--&lt;script type="text/javascript"&gt;--}%
          %{----}%
      %{--&lt;/script&gt;--}%
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;asset:link rel="icon" href="images/*" type="image/png"/&gt;
      &lt;asset:stylesheet src="main.css"/&gt;
      &lt;asset:javascript src="main.js"/&gt;
      &lt;asset:javascript src="ald/documentlist/documentlist.js"/&gt;
      &lt;asset:javascript src="ald/hierarchylist/hierarchylist.js"/&gt;
      &lt;asset:javascript src="ald/hierarchyviewer/hierarchyviewer.js"/&gt;    
      &lt;asset:javascript src="ald/documentdisplay/documentdisplay.js"/&gt;
      &lt;asset:javascript src="ald/artifactlist/artifactlist.js"/&gt;
      &lt;asset:javascript src="ald/classificationview/classificationview.js"/&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng-app="mainapp" class="tabWidth"&gt;
  
      &lt;div ng-controller="tabsController"&gt;
          &lt;div id="tabs" panel-Tabs&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#emptyDiv" ng-click="onClickTab('Document')"&gt;Document&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#emptyDiv" ng-click="onClickTab('Hierarchy')"&gt;Hierarchy&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#emptyDiv" ng-click="onClickTab('Artifacts')"&gt;Clauses, Terms and Titles&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div id="emptyDiv"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>