Wayne Li Wayne Li - 7 months ago 25
Javascript Question

Angular resource does not work on my code

I am trying the $resource of Angularjs, but there is an error with my program, and I can't figure it out.



<!DOCTYPE html>
<html>
<!--Login form validate, send to server, get from server-->
<head>
<meta charset="utf-8">
<title></title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myController">
<div class="row">
<div>
<p style="margin: 30px"></p>
</div>
<form ng-submit="sendform()">
<div class="form-group row">
<label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label" for="email">Email</label>
<div class="col-sm-6 col-sm-pull-2">
<input type="email" class="form-control" id="email" ng-model="newInfo.email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label" for="password">Password</label>
<div class="col-sm-6 col-sm-pull-2">
<input type="password" class="form-control" id="password" ng-model="newInfo.password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label">How do you know us</label>
<div class="col-sm-6 col-sm-pull-2">
<div class="radio" ng-repeat="source in knowSources">
<label>
<input type="radio" name="{{source}}" ng-model="newInfo.method" ng-value="source" id="{{source}}">
{{source}}
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 col-sm-push-2">
<button type="submit" class="btn btn-primary">Send information</button>
</div>
</div>
</form>

</div>
</div>

<script type="text/javascript">
angular.module("myApp",[])
.factory('resourceEntry',["$resource",function ($resource) {
return $resource('http://localhost:3000/contactInfo/:id');
}])

.controller("myController",["$scope","$log","resourceEntry",function ($scope,$log,resourceEntry) {
//the update object
$scope.newInfo = {email:"",password:"",method:""};
$scope.knowSources = ["Internet","Friends","Television","Others"];
//the form array
$scope.contactInfo = [];

$scope.sendform = function(){
$scope.newInfo.email = this.newInfo.email;
$log.info("newInfo.email: " + $scope.newInfo.email + "; tpye: " + typeof $scope.newInfo.email);
$scope.newInfo.password = this.newInfo.password;
$log.info("newInfo.password: " + $scope.newInfo.password + "; tpye: " + typeof $scope.newInfo.password);
$scope.newInfo.method = this.newInfo.method;
$scope.contactInfo.push($scope.newInfo);
$log.info("$scope.contactInfo(array): " + $scope.contactInfo[0]);
resourceEntry.save($scope.newInfo);
$scope.newInfo = {email:"",password:"",method:""};
}
}]);

</script>
</body>
</html>





I have a JSON file containing an empty array of contactInfo. The error shows


angular.js:13424Error: [$injector:unpr]
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20resourceEntry
at Error (native)...



which means the error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly.

I have checked that the dependencies for javascript should be fine, so I don't know why.

Answer

You did not include the angular-resource file. ie

Install it by bower according to the following command

bower install angular-resource --save

Then include

<script src="assets/bower_components/angular-resource/angular-resource.js"></script>

And also don't forget to inject the ngResource in your app

angular.module("myApp",['ngResource'])
        .factory('resourceEntry',["$resource",function ($resource) {
            return $resource('http://localhost:3000/contactInfo/:id');
        }])