1

我是 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}
4

1 回答 1

5

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

  1. 您必须修改后端（在我的情况下：来自 angular-seed 项目的web-server.js ，与 NodeJs 一起运行）才能接受“POST”方法请求。

  2. 然后，当将发送 POST 请求时，您必须捕获它（一个简单的“如果”就可以了）并调用一个函数来处理它。

  3. 最后，你必须编写这个函数来捕获请求数据并用它做你想做的事情（例如，创建一个 JSON 文件并将数据复制到其中）。

如果您还使用 NodeJs 以及来自 angular-seed 的 web-server.js，这就是我所做的：修改后的 Web-server.js

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

于 2013-11-29T10:31:46.407 回答