使用ngResource

时间:2016-03-02 17:52:35

标签: angularjs json ngroute ngresource

我正在通过Stephen Radford的“使用Bootstrap和Angularjs学习Web开发”一书来学习AngularJS。

在angularJS和一些Bootstrap的帮助下,在整个章节中都有一个“联系人管理器”项目。

在第8章“连接到服务器”中,您将学习如何与服务器通信的各种方法,主要是使用公开$ resource服务的ngResource模块,然后将其注入我们创建的工厂服务(命名“联系”)并在其中包含一个方法来建立我们的联系。

    .factory('Contact', function ContactFactory($resource) {

    var Resource = $resource("http://localhost:3000/contactList.json", {id: "@id"},{ update: {method: "PUT"} });

    return {
        get: function() {
         return Resource.query();   
        },
        find: function(id) {
         return Resource.get({id: id});   
        },
        create: function() {
         return new Resource();   
        },
        destroy: function(id) {
         Resource.remove({id: id});   
        }
    };


    })

这个想法是在主页面上显示一个联系人列表。当我使用Contact.get()方法在控制器中请求该页面并使用ng-repeat将其显示为单个联系人时,$ resource服务在从json文件检索联系人方面做得很好。

(...)

<tr ng-repeat="contact in contacts | filter:search">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>    
<td>{{contact.phone}}</td>    
<td><a href="#/contact/{{contact.id}}" class="btn btn-success btn-xs">View</a>
<button class="btn btn-danger btn-xs" ng-click="delete($index)">Delete</button>  


当我点击“查看”按钮查看单个联系人时,将使用ng-route $ routeProvider服务。以下是各个联系人视图的摘录:

     $routeProvider

    .when('/contact/:id', {

    controller: 'contactCtrl',
    templateUrl: 'assets/partials/contact.html'

    })
    .otherwise({
       redirectTo: '/' 
    });



    })

视图填充了“contact.html”部分,在这种情况下分配给它的控制器是“contactCtrl”。

.controller('contactCtrl', function($scope, $routeParams, Contact) {

 $scope.contact = Contact.find();

})

这是问题的开始。 find方法请求提供id参数。即使我只是将ID号硬编码到该页面中,页面也不会显示任何数据。

然后是find()方法定义中的问题吗?

*'contact.html'部分中的每个字段都要求显示“联系人”中的特定属性值,例如:

<p class="form-control-static" id="name" editable="contact.name" field-type="text"></p> 

(“editable”只是一个使字段可编辑的自定义指令。)

*这是我一直在使用的JSON:

           [{                  

               "id": "0",
                "name":"John Doe",
                "phone":"08154335882",
                "address":"12 Bronton street, Leicester",
                "website":"http://www.Johnthedoe.co.uk",
                "email":"john@example.com",
                "notes":"An ordinary person needing more attention."
            },
            {   
                "id": "1",
                "name":"Karan Bromwich",
                "phone":"09875681235",
                "address":"3 Wiltshire Abbey Road, Manchester",
                "website":"http://www.wearelost.com",
                "email":"karan@email.com",
                "notes":"A new client of ours."

            }
        ]

更新:如果我将$ routeParams.id传递给Contact.get()方法,则会显示以下错误:

操作get的资源配置出错。包含对象但得到数组的预期响应(请求:GET http://localhost:3000/contactList.json“)

所以我通过删除方括号并将其作为对象来修改JSON文件。然后它会抛出一个带有“意外”的错误,这基本上就是说JSON文件中只能有一个条目。 当我只留下一个条目时,它最终显示信息,但是主页面需要JSON文件中的数组,因此它会抛出错误。

所以问题是:如何在不抛出此错误的情况下使用get()从此JSON文件中的单个对象获取数据?

操作get的资源配置出错。包含对象但得到数组的预期响应(请求:GET http://localhost:3000/contactList.json

更新:

我找到了一种请求必要的JSON对象的解决方案。确保$ resource服务的第二个参数在“get”和“query”中将isArray属性设置为true,以使该行看起来像:

 var Resource = $resource("http://localhost:3000/contactList.json", {id: "@id"},
    {   'get': {method: "GET", isArray: true },
        'update': {method: "PUT", isArray: true},
        'query': {method: "GET", isArray: true}

    });

正如财产建议的那样,这使得$ resource服务期望一个数组。如果我为对象提供索引,那么在我的示例中它将是:

<p class="form-control-static" id="name" editable="contact[0].name" field-type="text"></p> 

它会显示正确的数据。但这会杀死find()方法的目的。我怀疑我创建的JSON结构完全错误。

是否有人能够建议如何使用包含多个对象的JSON文件,这些对象可以通过其特定属性值引用(例如,通过对象具有的id属性)?

0 个答案:

没有答案