这是我学习AngularJS的第二天。我有一个我无法解决的问题。一切顺利，直到我创建了工厂。我了解工厂/服务用于重构代码。因此，我从控制器中获取了一些代码，并将其发送到工厂，以便可以加载一些数据，但是事实并非如此。这些是我的代码：
(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); }());
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>
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; }; });
<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>
在Chrome的控制台中，我知道该customers.html文件未加载。我该如何解决？
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)
这意味着我的代码有问题。有人可以指出我的方向吗？为什么我的“提供者”未知？
我建议http-server作为一种快速简便的解决方案来运行您的应用程序，并帮助解决您的文件加载问题：
http-server
https://www.npmjs.com/package/http- server
