title: AngularJS:Uncaught Error: [$injector:modulerr]
body: <p>I'm trying AngularJS example given on <a href="http://angularjs.org" rel="nofollow">http://angularjs.org</a> titled Wire up a Backend.<br>
  I've copied code and saved files on my machine.<br>
  While executing index.html,<br>
  <code>Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=project&amp;p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A17%3A431)</code><br> 
  error is displaying on console.<br>
  Any help will be appreciated.<br>
  following is the code.  </p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="project"&gt;
  &lt;head&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-resource.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="https://cdn.firebase.com/v0/firebase.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"&gt;&lt;/script&gt;
  &lt;script src="project.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;JavaScript Projects&lt;/h2&gt;
    &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <p><strong>project.js</strong></p>
  
  <pre><code>angular.module('project', ['ngRoute', 'firebase'])
  .value('fbURL', 'https://angularjs-projects.firebaseio.com/')
  
  .factory('Projects', function($firebase, fbURL) {
  return $firebase(new Firebase(fbURL));
  })
  
  .config(function($routeProvider) {
  $routeProvider
  .when('/', {
    controller:'ListCtrl',
    templateUrl:'list.html'
  })
  .when('/edit/:projectId', {
    controller:'EditCtrl',
    templateUrl:'detail.html'
  })
  .when('/new', {
    controller:'CreateCtrl',
    templateUrl:'detail.html'
  })
  .otherwise({
    redirectTo:'/'
  });
  })
  
  .controller('ListCtrl', function($scope, Projects) {
  $scope.projects = Projects;
  })
  
  .controller('CreateCtrl', function($scope, $location, $timeout, Projects) {
   $scope.save = function() {
   Projects.$add($scope.project, function() {
    $timeout(function() { $location.path('/'); });
   });
   };
   })
  
   .controller('EditCtrl',
   function($scope, $location, $routeParams, $firebase, fbURL) {
   var projectUrl = fbURL + $routeParams.projectId;
   $scope.project = $firebase(new Firebase(projectUrl));
  
  $scope.destroy = function() {
    $scope.project.$remove();
    $location.path('/');
  };
  
  $scope.save = function() {
    $scope.project.$save();
    $location.path('/');
  };
  });
  </code></pre>
  
  <p><strong>list.html</strong></p>
  
  <pre><code>&lt;input type="text" ng-model="search" class="search-query" placeholder="Search"&gt;
  &lt;table&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Project&lt;/th&gt;
  &lt;th&gt;Description&lt;/th&gt;
  &lt;th&gt;&lt;a href="#/new"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr ng-repeat="project in projects | orderByPriority | filter:search | orderBy:'name'"&gt;
  &lt;td&gt;&lt;a href="{{project.site}}" target="_blank"&gt;{{project.name}}&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;{{project.description}}&lt;/td&gt;
  &lt;td&gt;
  &lt;a href="#/edit/{{project.$id}}"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>detail.html</strong></p>
  
  <pre><code>&lt;form name="myForm"&gt;
  &lt;div class="control-group" ng-class="{error: myForm.name.$invalid &amp;&amp;   !myForm.name.$pristine}"&gt;
  &lt;label&gt;Name&lt;/label&gt;
  &lt;input type="text" name="name" ng-model="project.name" required&gt;
  &lt;span ng-show="myForm.name.$error.required &amp;&amp; !myForm.name.$pristine" class="help-inline"&gt;Required {{myForm.name.$pristine}}&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="control-group" ng-class="{error: myForm.site.$invalid &amp;&amp; !myForm.site.$pristine}"&gt;
  &lt;label&gt;Website&lt;/label&gt;
  &lt;input type="url" name="site" ng-model="project.site" required&gt;
  &lt;span ng-show="myForm.site.$error.required &amp;&amp; !myForm.name.$pristine" class="help-inline"&gt;Required&lt;/span&gt;
  &lt;span ng-show="myForm.site.$error.url" class="help-inline"&gt;
      Not a URL&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;label&gt;Description&lt;/label&gt;
  &lt;textarea name="description" ng-model="project.description"&gt;&lt;/textarea&gt;
  
  &lt;br&gt;
  &lt;a href="#/" class="btn"&gt;Cancel&lt;/a&gt;
  &lt;button ng-click="save()" ng-disabled="myForm.$invalid"
        class="btn btn-primary"&gt;Save&lt;/button&gt;
   &lt;button ng-click="destroy()"
        ng-show="project.$remove" class="btn btn-danger"&gt;Delete&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>