javascript - 创建工厂后看不到数据

这是我学习 AngularJS 的第二天。我有一个我无法解决的问题。在我创建工厂之前，一切都运行良好。我了解工厂/服务用于重构代码。所以我从 Controller 中获取了一些代码并将它们发送到工厂，这样我就可以加载一些数据，但事实并非如此。这些是我的代码:

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

应用程序.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>&nbsp;</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>

客户 Controller .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;
    };
});

订单.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>

客户工厂.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 时。它从将使用 file:// 协议(protocol)生成 ajax 的文件夹中请求 template，但确实会失败。它正在失败，因为协议(protocol) file:// 无法通过 ajax $http 访问。

为了解决这个问题，您需要将您的代码托管在某些服务器上，例如 Apache/LAMP/WAMP 服务器，这样您的文件夹就会托管并且它会有一个 http://协议(protocol)。

关于javascript - 创建工厂后看不到数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32362474/