I am just making a basic AngularJS app from angular-seed which currently has:
- index.html
- app.js
- home/home.html
- home/home.js
Now, I want to redirect to home.html when I click on an li item Home with href="/home". This does okay, but it redirects me to directory structure instead of the file.
The files -
app.js
'use strict';
// Declare app level module which depends on views, and components
angular
.module('mentorSpot', [
'ngRoute',
'mentorSpot.home'
])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
home/home.js
'use strict';
angular.module('mentorSpot.home', ['ngRoute'])
.config(['$routeProvider'], function($routeProvider){
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
})
.controller('HomeCtrl',[function(){
}]);
home/home.html
<h1>This is the home page</h1>
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="mentorSpot" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MentorSpot</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<!-- W3.CSS Framework-->
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- jQuery and external JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="hp.js"></script>
<script src="https://use.fontawesome.com/d18274d1d9.js"></script>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-navbar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.f
</style>
</head>
<body>
<!-- Navbar -->
<ul class="w3-navbar w3-blue w3-card-2 w3-top w3-left-align w3-large">
<li class="w3-quarter w3-center"><h3>MentorSpot.com</h3></li>
<li class="w3-hide-small"><a href="#/home" class="w3-padding-large w3-hover-indigo">Home</a></li>
<li class="w3-hide-small"><a href="#htutw" class="w3-padding-large w3-hover-indigo">How to use this website?</a></li>
<li class="w3-hide-small"><a href="#Catalog" class="w3-padding-large w3-hover-indigo">Courses</a></li>
<li class="w3-hide-small"><a href="#RegLog" class="w3-padding-large w3-hover-indigo">Register/Login</a></li>
</ul>
<div ng-view>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="/home/home.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
via Nishit Mengar
No comments:
Post a Comment