Nach dem Erstellen einer Factory sind keine Daten angezeigt

Question

Es ist mein 2. Tag, an dem ich AngularJS lerne. Ich habe ein Problem, das ich nicht angehen kann. Alles hat gut funktioniert, bis ich eine Fabrik gegründet habe. Ich verstehe, dass Fabriken / Dienstleistungen verwendet werden, um Code umzugestalten. Also habe ich einen Code vom Controller genommen und ihn an eine Fabrik gesendet, damit ich einige Daten laden kann, aber das ist es nicht. Das sind meine Codes:

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

Ich verstehe, dass in der Konsole von Chrome die Datei customers.html nicht geladen wird. Wie behebe ich das?

Konsole

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)

Ich werde jede Hilfe schätzen.

BEARBEITEN:

Ich habe 'http-server' installiert und erhalte jetzt folgendes:

Konsole:

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)

Was bedeutet, dass mit meinem Code etwas nicht stimmt. Kann mich bitte jemand in eine Richtung weisen? Warum ist mein "Anbieter" unbekannt?

javascript angularjs

1

emi 2 Sept. 2015 im 23:25

Answer 1

Ich würde http-server als schnelle und einfache Lösung empfehlen, um Ihre Anwendung auszuführen und um Probleme beim Laden von Dateien zu lösen:

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

1

Gareth Whittaker 8 Sept. 2015 im 22:47

Answer 2

Da Sie nach einem templateUrl aus der $routeProvider Definition auf der Grundlage der $route Definition fragen. Es fragt nach template aus dem Ordner, der Ajax mit dem file:// -Protokoll erstellt, was fehlschlägt. Und es schlägt fehl, da das Protokoll file:// nicht über Ajax $http zugänglich ist.

Um dies zu beheben, müssen Sie Ihren Code auf einem Server wie dem Apache/LAMP/WAMP Server hosten, damit Ihr Ordner gehostet wird und ein http:// Protokoll hat.

3

Pankaj Parkar 2 Sept. 2015 im 20:34

Answer 3

Ich denke, es gibt nur einen Tippfehler zwischen CustomersFactory und CustomerFactory.

1

Gareth Whittaker 2 Sept. 2015 im 21:17

Nach dem Erstellen einer Factory sind keine Daten angezeigt

Index.html

App.js

CustomersController.js

Orders.html

CustomersFactory.js

3 Antworten

Verwandte Fragen

Verknüpfte Fragen

Neue Fragen