I'm currently working on configuring a basic Angular app.
Here is my main HTML:
<html ng-app="CostumerApp">
<head>
<title> Customers </title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Customer manager</h1>
</div>
<div class="row">
<div class="col-sm-12" ng-view></div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="controllers/costumerCtrl.js"></script>
</body>
This is the app JS file:
angular.module('CostumerApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider){
$routeProvider
.when('/customers', {
controller: 'customerCtrl',
templateUrl: 'views/list.html'
});
$locationProvider.html5Mode(true);
});
The customerCtrl.js file contains:
angular.module('CostumerApp')
.controller('customerCtrl', function ($scope){
$scope.customers = [];
});
For the list HTML:
<table class='table table-hover table-hover table-bordered'>
It seems that the routing is not working correctly. When I try to access 'http://localhost:3000/customers', it's not finding anything. Instead, when I go to just http://localhost:3000, it takes me to the project folder rather than my main HTML page.
I'm using Node HTTP Server and starting it with the command http-server -p 3000 -a localhost. Does anyone know why my localhost:3000 is not displaying the main page?
Thank you!