Ng-route工作不正常

ng-route not working correctly

本文关键字：不正常 工作 Ng-route      更新时间：2023-09-26

我正在为我的网站开发一个SPA。我正在使用Bootstrap, Font Awesome, Angular JS和Angular- ui -Bootstrap。我注入4页(home.html, workExp.html, projects.html和contact.html)在一个基础模板'index.html'使用ng-route。在workExp.html页面上，我使用Angular JS手风琴使用ui-bootstrap。我在IIS服务器上运行这个应用程序。

因此，每当我第一次点击这个地址:'http://localhost:1236/index.html#/'的网站时，它就会正确加载主页。当我尝试回到上面地址的主页时，导航到网站的其他页面后，我被重定向到一个没有内容的空页面，URL读'http://localhost:1236/index.html#'所有其他页面链接都如预期的那样工作，除了主页链接。那么我该如何解决这个问题呢?下面是index.html和script.js文件

——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;
}

在这里，我创建了您的代码的工作演示。

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
          };
        });

在你的代码中，我发现只有一个bug只是替换了那行

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


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

请检查一下，如果有任何问题请告诉我
谢谢. .

相关文章：