Угловой ресурс не работает на моем коде

Question

Угловой ресурс не работает на моем коде

0

Я пытаюсь $ ресурс Angularjs, но есть ошибка с моей программой, и я не могу понять это.

<!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)...

что означает, что ошибка возникает из-за того, что инжектор $ не может разрешить требуемую зависимость. Чтобы исправить это, убедитесь, что зависимость определена и написана правильно.

Я проверил, что зависимости для javascript должны быть в порядке, поэтому я не знаю почему.

Wayne Li 21 апр. 2016, в 04:52

Источник

0

Вы куда-нибудь включаете angular-resource.js? См. Docs.angularjs.org/api/ngResource
Mark Leiber 21 апр. 2016, в 02:47
0

Да, вы правы, спасибо!
Wayne Li 21 апр. 2016, в 03:25

Теги:

javascript

angularjs

angular-resource

2 ответа

0

Рабочая демонстрация

Добавить 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:""};
            }
        }]);

Надеюсь, что решить вашу проблему.

Khalid Hussain 21 апр. 2016, в 01:23

Ещё вопросы

Вы куда-нибудь включаете angular-resource.js? См. Docs.angularjs.org/api/ngResource

Ahmad Sharif · Accepted Answer · 2016-04-21T00-54-00.000Z

Вы не указали файл углового ресурса. т.е.

Установите его с помощью беседки в соответствии со следующей командой

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');
        }])

Спасибо, ваш ответ действительно ясен.