Question

我是angularJs的新手开发者。正在研究一些教程，现在面临以下问题。这是我的观点。

<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
    <title>Event Registry</title>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/app.css"/>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>

</head>
<body ng-cloak>
<div id="container">
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li> <a href="/app/addEvent.html"> Add Event </a>
            </ul>
        </div>
    </div>
   <div ng-controller="EditEventController">
       <div class="container">
                <h1>New Event</h1>
           <hr/>
           <form name="editEventForm">
               <fieldset>
                   <label for="eventname">Event Name :</label>
                   <input id="eventname" type="text" ng-model="event.name" placeholder="Enter your Event Name"/>
                   <label for="eventdate">Event Date :</label>
                   <input id="eventdate" type="text" ng-model="event.date" placeholder="format is (dd/mm/yy)..."/>
                   <label for="eventtime">Event Time : </label>
                   <input id="eventtime" type="text" ng-model="event.time" placeholder="Enter the start time and end time"/>
                   <label for="eventlocation">Event Location :</label>
                   <input id="eventlocation" type="text" ng-model="event.location.address" placeholder="Enter the location of the event"/>
                   <br/>
                   <input id="eventstate" type="text" class="input-small" ng-model="event.location.state" placeholder="Enter the state of the location of the event"/>
                   <input id="eventcountry" type="text" class="input-small" ng-model="event.location.country" placeholder="Enter the country of the location of the event"/>
                   <br/>
                   <label for="eventImageUrl">Image Url:</label>
                   <input id="eventImageUrl" type="url" class="input input-xlarge" ng-model="event.imageUrl" placeholder="enter the image url"/>

               </fieldset>
               <img ng-src="{{event.imageUrl}}" src=""/>
               <br/>
               <br/>
               <button type="submit" class="btn btn-primary" ng-click="savestatus(event,editEventForm)">Save</button>
               <button type="button" class="btn btn-default" ng-click="reset()">Cancel</button>

           </form>
       </div>
   </div>
</div>
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery-ui.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/services/services.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/services/GravatarUrlBuilder.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/controllers/EditProfileController.js"></script>
<script src="js/app.js"></script>
<!--<script src="js/filters.js"></script>-->
</body>
</html>

我的控制器是

angular.module('eventsApp.controllers').controller('EditEventController',function EditEventController($scope,eventData){
    $scope.event={};
    $scope.savestatus=function(event,form){
        if(form.$valid){
            eventData.save(event).
            then(function(response){
                    console.log("success :",response);
                },
            function(response){
                console.log("failure:",response);
            });


        };
    } ;
     $scope.reset=function(){
         window.location='../app/EventList.html';
     }
});

，app.js文件是

angular.module('eventsApp', [ 'ngSanitize' ,'eventsApp.controllers',  'eventsApp.services','ngResource'
 ])

我正在使用的服务文件是：

angular.module('eventsApp.services').factory('eventData',function($resource,$q){
       var resource= $resource('data/eventData/:id.json',{id:'@id'});
    return{
        getEventItem:function(){
            var deferred=$q.defer();
              resource.get({id:1},

               function(eventItem){
                  deferred.resolve(eventItem);
            },
               function(response){
                    deferred.reject(response);
               });
            return deferred.promise;
        } ,
           save:function(event){

                 var deferred=$q.defer();
               event.id=999;
               resource.save(event,
               function(response){
                     deferred.resolve(response);
               },
               function(response){
                   deferred.reject(response);
               }
               );
               return deferred.promise;
           }
    };
}


) ;

当我尝试在点击savestatus（）按钮时保存输入文本详细信息我无法将它们保存为磁盘上的json文件，如我所指的教程中所示。每当我试图保存它时，我都会收到以下错误...

POST http://localhost:8000/app/data/eventData/999.json 501 (Not Implemented) angular.js:7073
failure: Object {data: "", status: 501, headers: function, config: Object}

Answer 1

我遇到了这个问题并解决了我的问题。我是这样做的：

您必须修改后端（在我的情况下：web-server.js 来自angular-seed项目，按顺序运行NodeJs）接受'POST'方法请求。
然后，当你发送一个POST请求时必须抓住它（一个简单的'如果'会做的伎俩）并调用一个函数处理它。
最后，你必须编写这个函数捕获请求数据并用它做你想做的事（例如创建一个 JSON文件并将数据复制到其中）。

如果您还使用了NodeJs，也许还有来自angular-seed的web-server.js，这就是我所做的：modified Web-server.js

希望它可以帮助您或其他人避免501错误！

$ resource.save无法运行

1 个答案: