Question

这是我第二天学习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>&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>

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)

我将不胜感激。

编辑：

我安装了＆＃39; http-server＆＃39;现在得到以下内容：

控制台：

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)

这意味着我的代码存在问题。有人可以指点我某个方向吗？为什么我的＆＃34;提供商＆＃34;未知？

Answer 1

根据templateUrl定义，您要求$routeProvider定义$route。它要求文件夹中的template将使用file://协议制作ajax失败。由于协议file://无法通过ajax $http访问，因此失败了。

要解决此问题，您需要在Apache/LAMP/WAMP服务器等服务器上托管您的代码，以便托管您的文件夹。它将有一个http://协议。

Answer 2

我建议使用http-server作为运行应用程序的快速简便的解决方案，以帮助解决文件加载问题：

https://www.npmjs.com/package/http-server

Answer 3

我认为现在在CustomersFactory和CustomerFactory之间只是一个错字。

创建工厂后无法查看数据

的index.html

app.js

customersController.js

orders.html

customersFactory.js

3 个答案: