ng-route无法正常工作

时间：2016-10-24 18:13:58

标签： javascript html angularjs twitter-bootstrap

我正在为我的网站开发SPA。 我正在使用Bootstrap，Font Awesome，Angular JS和Angular-UI-Bootstrap。 我正在使用ng-route在基本模板'index.html'中注入4个页面（home.html，workExp.html，projects.html和contact.html）。 在workExp.html页面上，我使用的是使用ui-bootstrap的Angular JS手风琴。 我在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;
}

如果需要任何其他输入，请告诉我。

1 个答案:

答案 0 :(得分：0)

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

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

在您的代码中，我发现只有一个错误就是替换该行

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

带

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

请检查一下，如果您遇到任何问题，请告诉我 感谢..

相关问题
最新问题