$ resource.save不能正常工作 [英] $resource.save is not functioning

查看：132
本文介绍了$ resource.save不能正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我angularJs的新手开发商。
工作的一些教程和现在面临以下问题。
这是我的看法。

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=eventsApp＆GT;
＆LT; HEAD＆GT;
    ＆LT;标题＆GT;事件注册表＆LT; /标题＆GT;
    ＆LT;间的charset =UTF-8/＆GT;
    ＆LT;链接类型=文/ CSS相对=样式HREF =CSS / app.css/＆GT;
    ＆LT;链接类型=文/ CSS相对=样式HREF =CSS / bootstrap.css/＆GT;＆LT; /头＆GT;
＆LT;机身NG-斗篷＆GT;
＆LT; D​​IV ID =容器＆GT;
    ＆LT; D​​IV CLASS =导航栏＆GT;
        ＆LT; D​​IV CLASS =Navbar的内部＆GT;
            ＆LT; UL类=导航＆GT;
                ＆LT;立GT; ＆LT; A HREF =/应用程序/ addEvent.html＆GT;添加事件＆LT; / A＆GT;
            ＆LT; / UL＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
   ＆LT; D​​IV NG控制器=EditEventController＆GT;
       ＆LT; D​​IV CLASS =容器＆GT;
                ＆LT; H1＆gt;新建事件＆LT; / H1＆GT;
           ＆LT;小时/＆GT;
           ＆LT;表格名称=editEventForm＆GT;
               ＆LT;＆字段集GT;
                   ＆LT;标签=eventName的＆GT;事件名称：＆LT; /标签＆gt;
                   ＆LT;输入ID =eventName的类型=文本NG模型=event.name占位符=请输入您的事件名称/＆GT;
                   ＆LT;标签=EVENTDATE＆GT;活动日期：＆LT; /标签＆gt;
                   ＆LT;输入ID =EVENTDATE类型=文本NG模型=event.date占位符=格式（DD / MM / YY）.../＆GT;
                   ＆LT;标签=EVENTTIME＆GT;活动时间：＆l​​t; /标签＆gt;
                   ＆LT;输入ID =EVENTTIME类型=文本NG模型=event.time占位符=输入的开始时间和结束时间/＆GT;
                   ＆LT;标签=eventlocation＆GT;活动地点：LT; /标签＆gt;
                   ＆LT;输入ID =eventlocation类型=文本NG模型=event.location.address占位符=输入事件的位置/＆GT;
                   ＆LT; BR /＆GT;
                   ＆LT;输入ID =事件状态类型=文本级=输入小NG模型=event.location.state占位符=输入事件的位置的状态/＆GT;
                   ＆LT;输入ID =eventcountry类型=文本级=输入小NG模型=event.location.country占位符=输入事件的位置的国家/＆GT;
                   ＆LT; BR /＆GT;
                   ＆LT;标签=eventImageUrl＆GT;图片URL：＆LT; /标签＆gt;
                   ＆LT;输入ID =eventImageUrlTYPE =URL级=输入的输入XLARGENG模型=event.imageUrl占位符=请输入图片网址/＆GT;               ＆LT; /字段集＆GT;
               ＆LT; IMG NG-SRC ={{event.imageUrl}}SRC =/＆GT;
               ＆LT; BR /＆GT;
               ＆LT; BR /＆GT;
               ＆LT;按钮式=提交级=BTN BTN-主要NG点击=savestatus（事件，editEventForm）＆GT;保存＆LT; /按钮＆GT;
               ＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=reset（）的＆GT;取消＆LT; /按钮＆GT;           ＆LT; /表及GT;
       ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本SRC =LIB / jQuery的-1.9.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / jQuery的-ui.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB /下划线-min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =LIB / bootstrap.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =LIB /角度/ angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =LIB /角度/角sanitize.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =LIB /角度/角resource.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =JS /服务/ services.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /服务/ EventData.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /服务/ GravatarUrlBuilder.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /控制器/ controllers.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /控制器/ EventController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /控制器/ EditEventController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /控制器/ EditProfileController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ - ＆下; SCRIPT SRC =JS / filters.js＆GT;＆下; /脚本＆GT  - →;
＆LT; /身体GT;
＆LT; / HTML＆GT;

和我的控制器是

  angular.module（'eventsApp.controllers'）。控制器（'EditEventController'，功能EditEventController（$范围，EVENTDATA）{
    $ scope.event = {};
    $ scope.savestatus =功能（事件，形式）{
        如果（表格$有效）{
            eventData.save（事件）。
            然后（功能（响应）{
                    的console.log（成功，响应）;
                }，
            功能（响应）{
                的console.log（失败，响应）;
            }）;
        };
    };
     $ scope.reset =功能（）{
         window.location的= .. /应用/ EventList.html';
     }
}）;

和app.js文件是

  angular.module（'eventsApp'，['ngSanitize'，'eventsApp.controllers'，'eventsApp.services'，'ngResource
 ]）

和我使用的服务文件是：

  angular.module（'eventsApp.services'）。工厂（'EVENTDATA'，函数（$资源，$ Q）{
       VAR资源= $资源（数据/ EVENTDATA /：id.json'，{ID：@ ID'}）;
    返回{
        getEventItem：功能（）{
            变种推迟= $ q.defer（）;
              resource.get（{ID：1}，               功能（eventItem）{
                  deferred.resolve（eventItem）;
            }，
               功能（响应）{
                    deferred.reject（响应）;
               }）;
            返回deferred.promise;
        }，
           保存：函数（事件）{                 变种推迟= $ q.defer（）;
               event.id = 999;
               resource.save（事件，
               功能（响应）{
                     deferred.resolve（响应）;
               }，
               功能（响应）{
                   deferred.reject（响应）;
               }
               ）;
               返回deferred.promise;
           }
    };
}
）;

当我试图保存在savestatus的点击输入文本的详细信息按钮（）
我无法将它们保存为磁盘上的JSON文件，如图我指的教程..
每当我试图挽救它，我收到以下错误... 

  POST HTTP：//本地主机：8000 /应用程序/数据/ EVENTDATA / 999.json 501（尚未实施）angular.js：7073
失败：对象{数据：状态：501，标题：功能配置：对象}


解决方案

我遇到了这个问题，并解决了我的情况。以下是我如何做：


  1. 您必须修改后端（在我的情况：的网络server.js
    从角种子工程，为了与的NodeJS）运行
    接受POST方法请求。


  2. 然后，当POST请求将被发送，你
        必须抓住它（一个简单的'如果'会做的伎俩），并调用一个函数
        来处理它。


  3. 最后，你必须写这个函数这将
        捕捉请求数据，并做你想要它（例如创建
        JSON文件和数据复制到它）。


如果您还使用和的NodeJS从可能角种子网络server.js，这里是我做了什么：<一href=\"https://github.com/gle$p$ptre/angular-seed/commit/9108d8e4bf6f70a5145b836ebeae0db3f29593d7#diff-d169b27b604606d4223bd5d85cad7da1\">modified网络server.js

希望它会帮助你或其他人，以避免错误501！

I am a novice developer of angularJs. Working on some tutorials and facing the following problem now. This is my view.

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

and my controller is

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

and the app.js file is

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

and the services file i am using is:

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;
           }
    };
}


) ;

When i am trying to save the input text details on click of the savestatus() button I am unable to save them as a json file on the disk as shown in the tutorial I am referring to.. Whenever I have tried to save it I am getting the following error...

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

解决方案

I encountered this problem and solved my case. Here's how I did:

  1. You have to modify your back-end (in my case: web-server.js from angular-seed project, running with NodeJs) in order to accept 'POST' method requests.

  2. Then, when a POST request will be sent, you must catch it (a simple 'if' would do the trick) and call a function to handle it.

  3. Finally, you have to write this function which will catch the request data and do what you want with it (e.g. create a JSON file and copy the data into it).

If you're also using NodeJs and maybe the web-server.js from angular-seed, here's what I've done : modified Web-server.js

Hope it will help you or someone else to avoid 501 errors!

这篇关于$ resource.save不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆