简体   繁体   English

AngularJS:未捕获错误:[$ injector:modulerr]

[英]AngularJS:Uncaught Error: [$injector:modulerr]

I'm trying AngularJS example given on http://angularjs.org titled Wire up a Backend. 我正在尝试在http://angularjs.org上给出一个名为Wire up a Backend的AngularJS示例。
I've copied code and saved files on my machine. 我在我的机器上复制了代码并保存了文件。
While executing index.html, 执行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)
error is displaying on console. 控制台上显示错误。
Any help will be appreciated. 任何帮助将不胜感激。
following is the code. 以下是代码。

index.html 的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 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 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 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>

I think it's wrong with your $resource instance Project , which neither been injected in module('project', ['ngRoute', 'firebase']) nor create .factory('Projects') . 我认为你的$resource实例Project是错误的,它既没有注入module('project', ['ngRoute', 'firebase'])也没有创建.factory('Projects')

So you need sth like following i think: 所以你需要......我认为如下:

angular.module('project', ['ngRoute', 'firebase'])
    .factory('Projects', function($resource) {
        return $resource('url:id',
        {
            id: "@id"
        });
    })  

or create a new module and include in ['ngRoute', 'firebase'] 或创建一个新模块并包含在['ngRoute', 'firebase']

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM