I am trying to use the AngularJS example on http://angularjs.org under the heading “Connect backend”.
I copied the code and saved the files on my machine.
By executing index.html,
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=project&p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A17%3A431)
The error is displayed on the console.
Any help would be appreciated. Below is the code.
index.html
<!doctype html> <html ng-app="project"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-resource.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"> </script> <script src="https://cdn.firebase.com/v0/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script> <script src="project.js"></script> </head> <body> <h2>JavaScript Projects</h2> <div ng-view></div> </body> </html>
project.js
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('/'); }; });
list.html
<input type="text" ng-model="search" class="search-query" placeholder="Search"> <table> <thead> <tr> <th>Project</th> <th>Description</th> <th><a href="#/new"><i class="icon-plus-sign"></i></a></th> </tr> </thead> <tbody> <tr ng-repeat="project in projects | orderByPriority | filter:search | orderBy:'name'"> <td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td> <td>{{project.description}}</td> <td> <a href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a> </td> </tr> </tbody> </table>
detail.html
<form name="myForm"> <div class="control-group" ng-class="{error: myForm.name.$invalid && !myForm.name.$pristine}"> <label>Name</label> <input type="text" name="name" ng-model="project.name" required> <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="help-inline">Required {{myForm.name.$pristine}}</span> </div> <div class="control-group" ng-class="{error: myForm.site.$invalid && !myForm.site.$pristine}"> <label>Website</label> <input type="url" name="site" ng-model="project.site" required> <span ng-show="myForm.site.$error.required && !myForm.name.$pristine" class="help-inline">Required</span> <span ng-show="myForm.site.$error.url" class="help-inline"> Not a URL</span> </div> <label>Description</label> <textarea name="description" ng-model="project.description"></textarea> <br> <a href="#/" class="btn">Cancel</a> <button ng-click="save()" ng-disabled="myForm.$invalid" class="btn btn-primary">Save</button> <button ng-click="destroy()" ng-show="project.$remove" class="btn btn-danger">Delete</button> </form>