It's my 2nd day learning AngularJS. I have a problem I can't tackle. Everything was working fine until I created a factory. I understand that factories/services are used to refactor code. So I took some code from the controller and sent them to a factory so I can have some data loaded, but well, it's not. These are my 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> </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);
}());
In the console from Chrome, I understand the customers.html file is not loading. How do I fix this?
Console
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)
I will appreciate any help.
EDIT:
I installed 'http-server' and now get the following:
Console:
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)
Which means there's something wrong with my code. Can someone please point me in some direction? Why is my "provider" unknown?
See Question&Answers more detail:
os 
