Блог

Главная - Вопросы по программированию - ng-маршрут работает некорректно

ng-маршрут работает некорректно

#javascript #html #angularjs #twitter-bootstrap

#javascript #HTML #angularjs #twitter-bootstrap

Вопрос:

Я разрабатываю 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 accordion, используя ui-bootstrap. Я запускаю это приложение на сервере IIS.

Поэтому всякий раз, когда я впервые захожу на веб-сайт по этому адресу: ‘http://localhost:1236/index.html #/‘ он правильно загружает домашнюю страницу. После перехода на другие страницы веб-сайта, когда я пытаюсь вернуться на домашнюю страницу по указанному выше адресу, я перенаправляюсь на пустую страницу без содержимого, а URL-адрес гласит ‘http://localhost:1236/index.html #‘ все остальные ссылки на страницы работают должным образом, за исключением ссылки home. Итак, как мне исправить эту проблему? Пожалуйста, найдите 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 amp; 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. простое решение: измените a href="#" на a href="#/ . или установите значение, otherwise которое отправляет вас обратно на / .

2. Спасибо @Claies.. это сработало …!! Думаю, я думал об усложняющем решении довольно простой проблемы.

Ответ №1:

Здесь я создаю рабочую демонстрацию вашего кода.

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>

Угловой 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 amp; 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>

Пожалуйста, проверьте это и дайте мне знать, если вы столкнетесь с какой-либо проблемой в этом
Спасибо..