I have login page, dashboard page, and two other pages.
The user must login to access the remaining pages.
On browser load, the login page must be displayed.
app.module.js :
angular.module('myApp', ['ngRoute', 'ngStorage']);
app.config.js :
angular.module('myApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
when('/login', {
templateUrl: 'Views/login.html',
controller: 'loginController'
})
.when('dashboardController', {
templateUrl: 'Views/dashboard.html',
controller: 'dashboardController'
})
.when('issueController', {
templateUrl: 'Views/issue.html',
controller: 'issueController'
})
.when('receiptController', {
templateUrl: 'Views/receipt.html',
controller: 'receiptController'
})
.otherwise('/login');
$locationProvider.html5Mode(true);
}]);
I have html pages in Views folder and js files in Scripts folder.
index.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<base href="/">
<!--<base href="/" />-->
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js'></script>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script src="Scripts/angucomplete-alt.js"></script>
<link href="Styles/angucomplete-alt.css" rel="stylesheet" />
<link href="Styles/dashboard.css" rel="stylesheet" />
<link href="Styles/css/bootstrap.css" rel="stylesheet">
<link href="Styles/css/offcanvas.css" rel="stylesheet" />
<link href="Styles/index.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="icon" href="Styles/font-awesome/logo1.png">
<link rel="stylesheet" href="Styles/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="Scripts/loginController.js"></script>
<script src="Scripts/dashboardController.js"></script>
<script src="Scripts/issueController.js"></script>
<script src="Scripts/receiptController.js"></script>
</head>
<body ng-app="myApp">
<div ng-view></div>
</body>
</html>
I'm getting errors.
Failed to load resource: the server responded with a status of 404 (Not Found) angucomplete-alt.css:1
Failed to load resource: the server responded with a status of 404 (Not Found) dashboard.css:1
Failed to load resource: the server responded with a status of 404 (Not Found) index.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
app.config.js:1
