Angular资源对我的代码不起作用

Angular resource does not work on my code

本文关键字：代码 不起作用 我的 资源 Angular      更新时间：2023-09-26

我正在尝试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的依赖关系应该很好，所以我不知道为什么。

您没有包含angular资源文件。即

根据的以下命令，由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');
        }])

工作演示

添加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:""};
            }
        }]);

希望能解决你的问题。

相关文章：