节约使用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; //< - 在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();
}
}
< HTML NG-应用=entryManager>
...< - 包括angularjs,资源等。< DIV NG控制器=entryController>
<输入类型='文本'NG模型=名与GT;< BR />
< textarea的NG-模式=说明要求的>< / textarea的>< BR />
<按钮类=BTN BTN-主要NG点击=saveEntry()>保存< /按钮>
< / DIV>
首先觉得你应该注意,范围!=模型
,但范围可包含模型(S )。
您应该有一些物体在你的范围,然后将其保存。
那么,就不会有类似如下:
HTML
< DIV NG控制器=entryController>
<输入类型='文本'NG模型=poll.name>< BR />
< textarea的NG-模式=poll.description要求>< / textarea的>< BR />
<按钮类=BTN BTN-主要NG点击=saveEntry()>保存< /按钮>
< / DIV>
JavaScript的:
函数pollController($范围,$资源){
VAR民调= $资源('/项/ API /:身份证',{ID:'@id'}); $ scope.saveEntry =功能(){
polls.save($ scope.poll);
}
}
注1:就算你没有初始化的对象民意调查,当你开始输入AngularJS会自动创建新的对象。
注2:其更好地包装你的形式进入 ngForm
(加入 NG型=someformname
属性与NG-控制器格或以&LT包裹;表单名称='...'> ..< /表格方式>
在这种情况下,你可以通过 $ 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
div
to 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屋!