使用AngularJS和$resource保存新模型

发布时间：2020-12-17 08:48:51 所属栏目：安全来源：网络整理

导读：我试图使用$ resource理解AngularJS，但我看到的大多数示例不解释如何使用$ resource实际创建新实例(或整个设置应该如何显示)。我已经张贴我的代码在这底部。我有以下设置，其中发布到’/ entry / api’应该创建一个新的条目。 entry对象它自身有三个属性

我试图使用$ resource理解AngularJS，但我看到的大多数示例不解释如何使用$ resource实际创建新实例(或整个设置应该如何显示)。
我已经张贴我的代码在这底部。

我有以下设置，其中发布到’/ entry / api’应该创建一个新的条目。
entry对象它自身有三个属性：name，description和id。

我以为调用
$ scope.save();会做两件事：

>将输入字段映射为POST数据
>对$ resource中定义的url(在这种情况下为’/ entry / api’)发出POST请求

我看到的一些例子是手动映射数据到资源：

var entry = new Entry();
entry.name = $name; // defined in entryController
entry.description = $scope.description; // <-- defined in entryController
entry.$save()

我认为这不是必要的，因为这些字段在html中定义。
此解决方案导致：

>在后端定义模型
>在前端定义一个模型(entryController div)
>将来自entryController div的值添加到模型的JS版本，然后最终将其保存。

它可能是AngularJS的工作方式，但我认为html中的输入字段将自动映射。

否则，如果您添加或删除(后端)模型的属性，您至少要在代码中有3个位置进行更新。

你应该如何使用AngularJS和$ resource来保存新对象？

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>

第一个认为你应该注意，范围！=模型，但范围可以包含模型。

你应该在你的范围内有一些对象，然后保存它。

所以，会有类似如下：

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

注意1：即使你没有初始化的轮询对象，AngularJS会在你开始输入时自动创建新的对象。

注意2：它更好地包装你的表单到ngForm(通过添加ng-form =“someformname”属性到使用ng-controller的div或用< form name ='...'> ..< / form>在这种情况下，您可以通过$ scope.someformname。$ valid检查表单的有效性，然后保存。

好的例子是在AngularJS网站的主页上“布线后端”部分(btw，我最喜欢)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!