我正在通过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属性)?