Need help with AngularJS Routing using UI-Router. My index.html file is attempting to load the partial productListView.html using app.js as javascript, but I'm encountering an error: "Unexpected request: GET productListView.html" in the console. Any assistance would be greatly appreciated.
This is my index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8>
<title>Acme Product Management</title>
<!--Style Sheets-->
<link rel="stylesheet" type="text/css" href="styles/app.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
</head>
<body ng-app="productManagement">
<div class="container">
<div ui-view></div>
</div>
<!--Library Scripts-->
<script src="js/angular.min.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<!--Application Script-->
<script src="app.js"></script>
<!--Services-->
<script src="common/services/common-services.js"></script>
<script src="common/services/productResource.js"></script>
<script src="common/services/productResourceMock.js"></script>
<!--Product Controllers-->
<script src="products/productListCtrl.js"></script>
</body>
</html>
Here's my app.js:
(function(){
'use strict';
angular.module('productManagement',['common-services',
'productResourceMock',
'ui.router'])
.config(['$stateProvider',
'$urlRouterProvider',
function($stateProvider,
$urlRouterProvider){
$urlRouterProvider.otherwise('/products');
$stateProvider
.state('productList', {
url: '/products',
templateUrl: 'products/productListView.html',
controller: 'ProductListCtrl'
});
}]
);
})();