Angular資源在我的代碼上不起作用
[英]Angular resource does not work on my code
問題描述
我正在嘗試Angularjs的$ resource，但是我的程序有錯誤，我無法弄清楚。
<!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>
我有一個JSON文件，其中包含一個contactInfo空數組。 錯誤顯示
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)...
這意味着該錯誤是由於$ injector無法解決所需的依賴關系引起的。 要解決此問題，請確保正確定義了依賴項並對其進行了拼寫。
我檢查過javascript的依存關系應該很好，所以我不知道為什么。
2 個解決方案
解決方案1
0 已采納 2016-04-21 02:58:21
您沒有包括angular-resource文件。 即
根據以下命令由Bower安裝
bower install angular-resource --save
然后包括
<script src="assets/bower_components/angular-resource/angular-resource.js"></script>
並且也不要忘記在應用程序中注入ngResource
angular.module("myApp",['ngResource'])
.factory('resourceEntry',["$resource",function ($resource) {
return $resource('http://localhost:3000/contactInfo/:id');
}])
解決方案2
0 2016-04-21 03:26:56
添加angular-resource.min.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script>
注入ngResource
angular.module("myApp",['ngResource'])
.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:""};
}
}]);
希望能解決您的問題。
為什么我的外部資源在 JSFiddle 中不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.