I have encountered an issue with my index.html code. I am unable to load login.html when clicking on the login button.
<!doctype html>
<html ng-app="instagram">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compitable" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instagram</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<a href="/" class="navbar-brand"><i class="ion-images"></i> instagram</a>
<li><a href="#/">Home</a></li>
<li><a href="#/login">Log in</a></li>
<li><a href="#/signup">Sign up</a></li>
<li><a ng-click="logout()" href="">Logout</a></li>
</ul>
</div>
</div>
<div ng-view=""></div>
<script src="Vendor/angular.js"></script>
<script src="Vendor/angular-route.js"></script>
<script src="Vendor/angular-messages.js"></script>
<script src="Vendor/satellizer.js"></script>
<script src="app.js"></script>
<script src="Controllers/home.js"></script>
<script src="Controllers/login.js"></script>
<script src="Controllers/signup.js"></script>
<script src="Controllers/detail.js"></script>
<script src="Controllers/navbar.js"></script>
</body>
</html>
This is my app.js code where a similar issue occurred with the home page but was resolved using ng-view.
angular.module('instagram', ['ngRoute', 'ngMessages','satellizer']).
config(function($routeProvider, $authProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.html',
controller: 'HomeCtrl'
})
.when('/login', {
templateUrl: 'Views/login.html',
controller: 'LoginCtrl'
})
.when('/signup', {
templateUrl: 'Views/signup.html',
controller: 'SignupCtrl'
})
.when('/photo/:id', {
templateUrl: 'Views/detail.html',
controller: 'DetailCtrl'
})
.otherwise('/');
$authProvider.loginUrl = 'http://localhost:3000/auth/login';
$authProvider.signupUrl = 'http://localhost:3000/auth/signup';
$authProvider.oauth2({
name: 'instagram',
url: 'http://localhost:3000/auth/instagram',
redirectUri: 'http://localhost:8000',
clientid: '48c078d56c5d4f4e9962e06443b4f156',
requiredUrlParams:['scope'],
scope: ['likes'],
scopeDelimiter: '+',
authorizationEndpoint: 'https://api.instagram.com/oauth/authorize'
});
});
Upon reviewing the code, everything seems correct. Please advise me on what mistake could be causing this issue.