Nachiket Nachiket - 1 month ago 8
AngularJS Question

ng-route not working correctly

I am developing a SPA for my website.
I'm working with Bootstrap, Font Awesome, Angular JS and Angular-UI-Bootstrap.
I'm injecting 4 pages(home.html, workExp.html, projects.html and contact.html) in a base template 'index.html' using ng-route.
On the workExp.html page I'm using Angular JS accordion using ui-bootstrap.
I'm running this application on an IIS server.

So whenever I first hit the website on this address: 'http://localhost:1236/index.html#/' it loads the home page correctly. After navigating to the other pages of the website when I try to come back to the home page on the above address, I'm redirected to an empty page with no content and the URL reads 'http://localhost:1236/index.html#' all the other page links work as expected except the home link.
So how do I fix this issue?
Please find the index.html and the script.js file below.

--index.html

<!DOCTYPE html>
<html ng-app="myPage">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.js"></script>
<script src="script.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-controller="indexContoller" style="background-color:#ccc">
<div id="wrap">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Nachiket Kare</a>
</div>

<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#workExp"><i class="fa fa-suitcase"></i> Work Experience</a></li>
<li><a href="#projects"><i class="fa fa-archive"></i> Projects</a></li>
<li><a href="#contact"><i class="fa fa-info-circle"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>


<div id="main">
<div ng-view>
</div>
</div>


</div>
<footer class="footer"></footer>
</body>
</html>


--script.js

var myPage = angular.module('myPage', ['ngRoute', 'ui.bootstrap']);

myPage.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'indexContoller'
})
.when('/workExp', {
templateUrl: 'pages/workExp.html',
controller: 'workExpController'
})
.when('/projects', {
templateUrl: 'pages/projects.html',
controller: 'projectsController'
})
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})
});

myPage.controller('indexContoller',function($scope){
var currentTime = (new Date).getHours();
var messageStr;
if(currentTime < 12){
messageStr = "Good Morning! Hope you have a nice day!";
}else if(currentTime >= 12 & currentTime <= 18){
messageStr = "Good Afternoon! Hope you are having a good day!";
}else if(currentTime > 18){
messageStr = "Good Evening! Hope you had a wondeful day!";
}

$scope.message = messageStr;
});

myPage.controller('workExpController', function($scope){
});

myPage.controller('projectsController', function($scope){
});

myPage.controller('contactController', function($scope){
});

myPage.controller('accordionController',function($scope){
$scope.oneAtATime = true;

$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];

$scope.status = {
isCustomHeaderOpen: false,
isFirstOpen: true,
isFirstDisabled: false
};
});


--style.css

html, body {
height: 100%;
//font-family: 'Open Sans Condensed', sans-serif;
//font-family: 'Oswald', sans-serif;
//font-family: 'Nunito', sans-serif;
font-family: 'Inconsolata', monospace;
}

#wrap{
min-height: 100%;
}

#main{
overflow: auto;
padding-bottom: 20px;
}

.footer{
position: relative;
margin-top: -20px;
height: 20px;
clear:both;
padding-top: 20px;
background-color: #333;
}

#home-desc{
font-size: 16px;
}

#wrap header{
font-family: 'Inconsolata', monospace;
}


Please let me know if any additional input is required.

Answer

Here, I create working demo of your code.

http://codepen.io

HTML

<!DOCTYPE html>
<html ng-app="myPage">
    <head>      
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />


        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-touch.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.js"></script>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
    </head>
    <body ng-controller="indexContoller" style="background-color:#ccc">
        <div id="wrap">
            <header>
                <nav class="navbar navbar-default">
                    <div class="container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="/">Nachiket Kare</a>
                        </div>

                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
                            <li><a href="#workExp"><i class="fa fa-suitcase"></i> Work Experience</a></li>
                            <li><a href="#projects"><i class="fa fa-archive"></i> Projects</a></li>
                            <li><a href="#contact"><i class="fa fa-info-circle"></i> Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </header>


            <div id="main">
                <div ng-view>
                </div>
            </div>


        </div>
        <footer class="footer"></footer>
      <script id="pages/home.html" type="text/ng-template">
      <h1>Home Page</h1>
      <p>Message is :: {{message}}</p>
      </script>
      <script id="pages/home.html" type="text/ng-template">
      <h1>Home Page</h1>
      <p>Message is :: {{message}}</p>
      </script>
      <script id="pages/workExp.html" type="text/ng-template">
      <h1>Work Exp  Page</h1>

      </script>
      <script id="pages/projects.html" type="text/ng-template">
      <h1>Projects View</h1>

      </script>
      <script id="pages/contact.html" type="text/ng-template">
      <h1>Contact View</h1>

      </script>
        <style >
            html, body {
    height: 100%;
    //font-family: 'Open Sans Condensed', sans-serif;
    //font-family: 'Oswald', sans-serif;
    //font-family: 'Nunito', sans-serif;
    font-family: 'Inconsolata', monospace;
}

#wrap{
    min-height: 100%;
}

#main{
    overflow: auto;
    padding-bottom: 20px;
}

.footer{
    position: relative;
    margin-top: -20px;
    height: 20px;
    clear:both;
    padding-top: 20px;
    background-color: #333;
}

#home-desc{
    font-size: 16px;
}

#wrap header{
    font-family: 'Inconsolata', monospace;
}
        </style>
    </body>
</html>

Angular JS CODE

var myPage = angular.module('myPage', ['ngRoute', 'ui.bootstrap']);

        myPage.config(function($routeProvider){
            $routeProvider
            .when('/', {
                templateUrl: 'pages/home.html',
                controller: 'indexContoller'
            })
            .when('/workExp', {
                templateUrl: 'pages/workExp.html',
                controller: 'workExpController'
            })
            .when('/projects', {
                templateUrl: 'pages/projects.html',
                controller: 'projectsController'
            })
            .when('/contact', {
                templateUrl: 'pages/contact.html',
                controller: 'contactController'
            })
        });

        myPage.controller('indexContoller',function($scope){

            var currentTime = (new Date).getHours();
            var messageStr;
            if(currentTime < 12){
                messageStr = "Good Morning! Hope you have a nice day!";
            }else if(currentTime >= 12 & currentTime <= 18){
                messageStr = "Good Afternoon! Hope you are having a good day!";
            }else if(currentTime > 18){
                messageStr = "Good Evening! Hope you had a wondeful day!";
            }

            $scope.message = messageStr;
        });

        myPage.controller('workExpController', function($scope){

        });

        myPage.controller('projectsController', function($scope){
        });

        myPage.controller('contactController', function($scope){
        });

        myPage.controller('accordionController',function($scope){
            $scope.oneAtATime = true;

          $scope.groups = [
            {
              title: 'Dynamic Group Header - 1',
              content: 'Dynamic Group Body - 1'
            },
            {
              title: 'Dynamic Group Header - 2',
              content: 'Dynamic Group Body - 2'
            }
          ];

          $scope.status = {
            isCustomHeaderOpen: false,
            isFirstOpen: true,
            isFirstDisabled: false
          };
        });

In your code I found only one bug that just replace that line

<li><a href="#"><i class="fa fa-home"></i> Home</a></li>

with

<li><a href="#/"><i class="fa fa-home"></i> Home</a></li>

Please check that and let me know if you face any issue in that
Thanks..