创建工厂后看不到任何数据
No data in view after creating a factory
这是我学习AngularJS的第二天了。我有个解决不了的问题。一切都很好，直到我创建了一个工厂。我知道工厂/服务是用来重构代码的。我从控制器中取了一些代码并将它们发送到工厂，这样我就可以加载一些数据，但事实并非如此。这些是我的代码:
index . html
(function() {
var customerFactory = function() {
var customers = [
{
id: 1,
joined: '2005-09-07',
name: 'Mayweather',
city: 'Brooklyn',
orderTotal: '43.1299',
orders: [
{
id: 1,
product: 'Pencils',
total: 9.9956
}
]
},
{
id: 2,
joined: '2005-09-07',
name: 'Jason',
city: 'Cleveland',
orderTotal: '89.8933',
orders: [
{
id: 1,
product: 'iPad',
total: 20.9956
}
]
},
{
id: 3,
joined: '1999-08-27',
name: 'Jade',
city: 'Wroclaw',
orderTotal: '77.0092',
orders: [
{
id: 1,
product: 'Pillows',
total: 12.2311
}
]
},
{
id: 4,
joined: '2015-09-01',
name: 'David',
city: 'Accra',
orderTotal: '13.8465',
orders: [
{
id: 1,
product: 'Serek',
total: 11.4782
}
]
},
{
id: 5,
joined: '2001-01-18',
name: 'Doyet',
city: 'Paris',
orderTotal: '23.9930',
orders: [
{
id: 1,
product: 'Serek',
total: 11.4782
}
]
}];
//Defind factory object
var factory = {};
factory.getCustomers = function() {
return customers;
};
return factory;
};
angular.module('myApp').factory('customerFactory', customerFactory);
}());
app.js
angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
'use strict';
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.when('/orders/:customerId', {
controller: 'OrdersController',
templateUrl: 'app/views/orders.html'
})
.otherwise( { redirectTo: '/' });
});
##customers.html
<h3>Customers</h3>
Filter: <input type="text" ng-model="customerFilter.name" />
<br/><br/>
<table>
<tr>
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">Order Total</th>
<th ng-click="doSort('joined')">Joined</th>
<th> </th>
</tr>
<tr ng-repeat="cust in filtered = (customers | filter:customerFilter | orderBy:sortBy:reverse)">
<td>{{ cust.name | uppercase }}</td>
<td>{{ cust.city }}</td>
<td>{{ cust.orderTotal | currency:'PLN' }}</td>
<td>{{ cust.joined | date}}</td>
<td><a href="#/orders/{{ cust.id }}">View Orders</a></td>
</tr>
</table>
<span> Total customers: {{ filtered.length }} </span>
customersController.js
angular.module('myApp')
.controller('CustomersController', function ($scope, customersFactory) {
'use strict';
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [];
function init (){
$scope.customers = customersFactory.getCustomers();
}
init();
$scope.doSort = function (propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
});
orders.html
<h3>Orders</h3>
<table>
<tr>
<th>Product</th>
<th>Total</th>
</tr>
<tr ng-repeat="order in orders">
<td>{{ order.product }}</td>
<td>{{ order.total | currency:'PLN' }}</td>
</tr>
</table>
customersFactory.js
(function() {
var customerFactory = function() {
var customers = [
{
id: 1,
joined: '2005-09-07',
name: 'Mayweather',
city: 'Brooklyn',
orderTotal: '43.1299',
orders: [
{
id: 1,
product: 'Pencils',
total: 9.9956
}
]
},
{
id: 2,
joined: '2005-09-07',
name: 'Jason',
city: 'Cleveland',
orderTotal: '89.8933',
orders: [
{
id: 1,
product: 'iPad',
total: 20.9956
}
]
},
{
id: 3,
joined: '1999-08-27',
name: 'Jade',
city: 'Wroclaw',
orderTotal: '77.0092',
orders: [
{
id: 1,
product: 'Pillows',
total: 12.2311
}
]
},
{
id: 4,
joined: '2015-09-01',
name: 'David',
city: 'Accra',
orderTotal: '13.8465',
orders: [
{
id: 1,
product: 'Serek',
total: 11.4782
}
]
},
{
id: 5,
joined: '2001-01-18',
name: 'Doyet',
city: 'Paris',
orderTotal: '23.9930',
orders: [
{
id: 1,
product: 'Serek',
total: 11.4782
}
]
}];
//Defind factory object
var factory = {};
factory.getCustomers = function() {
return customers;
};
return factory;
};
angular.module('myApp').factory('customerFactory', customerFactory);
}());
在Chrome的控制台中，我理解customers.html文件没有加载。我该如何解决这个问题?
XMLHttpRequest cannot load file:///Users/siaw/Desktop/angularjshelloworld/app/views/customers.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10661
angular.js:12416 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/siaw/Desktop/angularjshelloworld/app/views/customers.html'.
at Error (native)
at https://code.angularjs.org/1.4.5/angular.js:10661:11
at sendReq (https://code.angularjs.org/1.4.5/angular.js:10480:9)
at serverRequest (https://code.angularjs.org/1.4.5/angular.js:10187:16)
at processQueue (https://code.angularjs.org/1.4.5/angular.js:14634:28)
at https://code.angularjs.org/1.4.5/angular.js:14650:27
at Scope.$eval (https://code.angularjs.org/1.4.5/angular.js:15878:28)
at Scope.$digest (https://code.angularjs.org/1.4.5/angular.js:15689:31)
at Scope.$apply (https://code.angularjs.org/1.4.5/angular.js:15986:24)
at bootstrapApply (https://code.angularjs.org/1.4.5/angular.js:1658:15)(anonymous function) @ angular.js:12416
angular.js:12416 Error: [$compile:tpload] Failed to load template: app/views/customers.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.5/$compile/tpload?p0=app%2Fviews%2Fcustomers.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:17565)
at processQueue (angular.js:14634)
at angular.js:14650
at Scope.$eval (angular.js:15878)
at Scope.$digest (angular.js:15689)
at Scope.$apply (angular.js:15986)
at bootstrapApply (angular.js:1658)
at Object.invoke (angular.js:4473)
at doBootstrap (angular.js:1656)
我很感激你的帮助。
编辑:我安装了'http-server'，现在得到以下内容:
控制台:Error: [$injector:unpr] Unknown provider: customersFactoryProvider <- customersFactory <- CustomersController
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=customersFactoryProvider%20%3C-ustomersFactory%20%3C-%20CustomersController
at REGEX_STRING_REGEXP (https://code.angularjs.org/1.4.5/angular.js:68:12)
at https://code.angularjs.org/1.4.5/angular.js:4284:19
at Object.getService [as get] (https://code.angularjs.org/1.4.5/angular.js:4432:39)
at https://code.angularjs.org/1.4.5/angular.js:4289:45
at getService (https://code.angularjs.org/1.4.5/angular.js:4432:39)
at invoke (https://code.angularjs.org/1.4.5/angular.js:4464:13)
at Object.instantiate (https://code.angularjs.org/1.4.5/angular.js:4481:27)
at https://code.angularjs.org/1.4.5/angular.js:9108:28
at $route.link (http://localhost:8080/angular-route.js:977:26)
at invokeLinkFn (https://code.angularjs.org/1.4.5/angular.js:8746:9)(anonymous function) @ angular.js:12416ident.$get @ angular.js:9203invokeLinkFn @ angular.js:8748nodeLinkFn @ angular.js:8246compositeLinkFn @ angular.js:7637publicLinkFn @ angular.js:7512name.$get.boundTranscludeFn @ angular.js:7656controllersBoundTransclude @ angular.js:8273update @ angular-route.js:935parent.$get.Scope.$broadcast @ angular.js:16200(anonymous function) @ angular-route.js:619processQueue @ angular.js:14634(anonymous function) @ angular.js:14650parent.$get.Scope.$eval @ angular.js:15878parent.$get.Scope.$digest @ angular.js:15689parent.$get.Scope.$apply @ angular.js:15986done @ angular.js:10511completeRequest @ angular.js:10683requestLoaded @ angular.js:10624
favicon.ico:1 GET http://localhost:8080/favicon.ico 404 (Not Found)
这意味着我的代码有问题。有人能给我指个方向吗?为什么我的"提供者"是未知的?
因为您在$route定义的基础上要求从$routeProvider定义中获得templateUrl。它从文件夹中请求template，这将使ajax具有file://协议，这确实失败了。它是失败的协议file://不能通过ajax $http访问。
为了解决这个问题，你需要把你的代码托管在一些服务器上，比如Apache/LAMP/WAMP服务器，这样你的文件夹就会托管&它将有一个http://协议
我推荐http-server作为一个快速简单的解决方案来运行您的应用程序，并帮助解决文件加载问题:
我想现在只是CustomersFactory和CustomerFactory之间有一个错别字。
相关文章：
- 在javascript中调用函数/对象引用时，可容纳任何数据类型
- php函数的XMLHttpRequest响应不包含任何数据
- Javascript-Ajax 无法发送任何数据
- 为什么复选框在未选中时不提交任何数据
- 如果发现任何数据，如何停止每7秒运行一次的函数
- onClick(）函数没有'不要发布任何数据
- ajax调用成功，但未返回任何数据
- 带有大型JSON的简单ngTable在单元格中不显示任何数据
- 动态输入文件中未加载任何数据
- 输入类型“文本”的 ng-init 不会在文本框内显示任何数据
- AngularJS “ng-repeat |滤波器:..“没有像我预期的那样工作(不显示任何数据）
- 发送 XHR 请求而不接收任何数据
- $.getJSON 没有进入函数，也没有获取任何数据
- Chained Promise with Express:在最后一步中未收到任何数据
- 蓝鸟承诺不会收到任何数据
- jQuery $.ajax 成功，但 serv 没有接收任何数据
- 我没有从getJSON函数获得任何数据
- 套接字 - 客户端站点上不显示任何数据
- XMLHttpRequest 不接收任何数据或只是“未定义”
- 在按 TAB 键时，文本字段中没有任何数据，它应该显示所需的字段验证 ASP.NET
