节约使用AngularJS和$资源新模式 [英] Saving new models using AngularJS and $resource
问题描述
我试图让使用$资源AngularJS的理解，但大部分我看到那里的例子并没有解释如何实际创建使用$资源的新的东西实例（或整个安装的外观） 。
我已为我的code。在这条底线。
我有以下的设置，在这里张贴到'/项/ API应该创建一个新条目。
本项对象它的自我有三个属性：名称，描述和ID
我认为这调用
$ scope.save（）;会做两件事情：
- 地图输入字段作为POST数据
- 请POST请求在$资源定义的URL（在这种情况下，'/项/ API'）
我见过的数据是手动映射到资源这样一些例子：
VAR进入=新条目（）;
entry.name = $名称; //在entryController定义
entry.description = $ scope.description; //＆LT; - 在entryController定义
条目。$保存（）
我认为这不应该是必要的，因为这些字段在HTML中定义。
该解决方案将导致：
- 在后端定义模型
- 在前端定义模型（entryController
DIV） - 从entryController
DIV到模型的JS版本添加从值，然后最后保存它。
这可能是AngularJS的工作方式，但是我认为，在HTML中的输入字段将自动映射。
另外，你必须至少有3位在code如果您添加或删除（后端）模型的属性进行更新。
你是如何应该使用AngularJS与 $资源一起保存新对象？
angular.module（'entryManager'，['ngResource']）;功能pollController（$范围，$资源）{
$ scope.polls = $资源（'/项/ API /：身份证'，{ID：'@id'}）; $ scope.saveEntry =功能（）{
this.save（）;
}
}
＆LT; HTML NG-应用=entryManager＆GT;
...＆LT; - 包括angularjs，资源等。＆LT; DIV NG控制器=entryController＆GT;
＆LT;输入类型='文本'NG模型=名与GT;＆LT; BR /＆GT;
＆LT; textarea的NG-模式=说明要求的＆GT;＆LT; / textarea的＆GT;＆LT; BR /＆GT;
＆LT;按钮类=BTN BTN-主要NG点击=saveEntry（）＆GT;保存＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
首先觉得你应该注意，范围！=模型，但范围可包含模型（S ）。
您应该有一些物体在你的范围，然后将其保存。
那么，就不会有类似如下：
HTML
＆LT; DIV NG控制器=entryController＆GT;
＆LT;输入类型='文本'NG模型=poll.name＆GT;＆LT; BR /＆GT;
＆LT; textarea的NG-模式=poll.description要求＆GT;＆LT; / textarea的＆GT;＆LT; BR /＆GT;
＆LT;按钮类=BTN BTN-主要NG点击=saveEntry（）＆GT;保存＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
JavaScript的：
函数pollController（$范围，$资源）{
VAR民调= $资源（'/项/ API /：身份证'，{ID：'@id'}）; $ scope.saveEntry =功能（）{
polls.save（$ scope.poll）;
}
}
注1：就算你没有初始化的对象民意调查，当你开始输入AngularJS会自动创建新的对象。
注2：其更好地包装你的形式进入 ngForm （加入 NG型=someformname属性与NG-控制器格或以＆LT包裹;表单名称='...'＆GT; ..＆LT; /表格方式＆gt; 在这种情况下，你可以通过 $ scope.someformname检查形式的有效性。$有效保存之前。
很好的例子是AngularJS网站主页连线后端部分（顺便说一句，我的最爱）上。
I'm trying to get an understanding of AngularJS using $resource, however most of the examples I see out there don't explain how to actually create new instances of something using $resource (or how the entire setup should look). I've posted my code at the bottom of this.
I have the following setup, where posting to '/entry/api' should create a new entry. The entry object it self has three properties: name, description and id.
i thought that calling $scope.save(); would do two things:
- Map the input fields as POST data
- make a POST request to the url defined in the $resource (in this case '/entry/api')
Some examples I've seen are manually mapping the data to the resource as such:
var entry = new Entry();
entry.name = $name; // defined in entryController
entry.description = $scope.description; // <-- defined in entryController
entry.$save()
I thought this wasn't supposed to be necessary, as these fields are defined in the html. This solution results in:
- Defining a model in the backend
- Defining a model in the front end (the entryController
div) - Adding the values from the from the entryController
divto the JS version of the model and then finally saving it.
It might be the way AngularJS works, however I thought that the input fields in the html would automatically be mapped.
Otherwise you have at least 3 places in the code to update if you add or remove a property of your (backend) model.
How are you supposed to use AngularJS along with $resource to save new objects?
angular.module('entryManager', ['ngResource']);
function pollController($scope, $resource) {
$scope.polls = $resource('/entry/api/:id', {id: '@id'});
$scope.saveEntry = function() {
this.save();
}
}
<html ng-app="entryManager">
... <-- include angularjs, resource etc.
<div ng-controller="entryController">
<input type='text' ng-model="name"><br/>
<textarea ng-model="description" required></textarea><br/>
<button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>
The first think you should note, that scope != model, but scope can contain model(s).
You should have some object in your scope and then save it.
So, there would be something like the following:
HTML:
<div ng-controller="entryController">
<input type='text' ng-model="poll.name"><br/>
<textarea ng-model="poll.description" required></textarea><br/>
<button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>
JavaScript:
function pollController($scope, $resource) {
var polls = $resource('/entry/api/:id', {id: '@id'});
$scope.saveEntry = function() {
polls.save($scope.poll);
}
}
Note1: even if you do not have initialized poll object, AngularJS will automatically create new object when you start typing.
Note2: its better to wrap your form into ngForm (by adding ng-form="someformname" attribute to div with ng-controller or wrap with <form name='...'>..</form>. In this case you could check validity of form by $scope.someformname.$valid before saving.
Good example is on main page of AngularJS web site under "wiring the backend" section (btw, mine favorite).
这篇关于节约使用AngularJS和$资源新模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
