Ссылки, не работающие с angular ui-router

ProgramBox

Ссылки, не работающие с angular ui-router

Post author:admin
Запись опубликована:19 февраля, 2023
Post category:Вопросы по программированию

#javascript #angularjs

Вопрос:

Итак, я настроил ui-router, и он работал несколько минут назад, вроде как, он отображал шаблон с содержимым, загруженным из другого html-файла, но ни одна из ссылок не будет работать. Теперь ничего не работает: шаблон отображается, но содержимое не загружается, и ни одна из ссылок не работает.

Ctrl.js

 var site = angular.module('site', ['ui.router']);

site.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('page', {
      url: '/page',
      templateUrl: 'page.html',
    })
    .state('about', {
      url: '/about',
      templateUrl: 'about.html',
    });
    $urlRouterProvider.otherwise('/page');
  })

Index.html

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="scripts/ctrl.js"></script>
    <link rel="stylesheet" href="style/main.css">
  </head>
  <body ng-app="site">

    <nav class="navbar  navbar-default navbar-fixed-top" id="navigate">
      <div class="container">

      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
            </div>
            <div class="collapse navbar-collapse" id="navSmall">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#/about.html">about</a></li>
              </ul>
            </div>


     </div>
    </nav>

  <div class="jumbotron text-center container-fluid">
    <div ui-view></div>


  </div>


<footer class="footer">
<div id="note" class="container">
  <div class="row">
    <div class="col-sm-8">
     -----Footer Content-----
    </div>
    <div class="col-sm-4">
    </div>
  </div>
</div>
</footer>

  </body>
  </html>

About.html (должен быть загружен, но это не так)

   <div ui-view="about">
    <div class="container-fluid bg-about">
      <div class="container-content">
      <div class="row">

      </div>
    </div>
    </div>
    </div>

Вау, вы все быстрые! Спасибо за предложения. Итак, обновление: изменение его на ahref="#/about" помогло в том, что теперь я могу перейти по ссылке, но содержимое по-прежнему не отображается. Ошибка консоли:

     Error: Access to restricted URI denied
fg/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:103:167
n@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:98:460
m/g<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:95:489
e/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
Ac/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:115
h/<.invoke@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:374
Ac/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:36
Ac@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:332
fe@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:20:156
@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:315:135
g/</j@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
 angular.min.js:117:399

1. Находится about.html в том же каталоге, index.html что и? Кроме того, у вас есть ui-view="about" , в about.html котором было бы что-то, что вы могли бы использовать с именованными представлениями в дочерних состояниях, но у вас, похоже, нет ни одного из них. Вы уверены, что это должно быть там? Наконец, переключитесь на не уменьшенную версию angular.js для улучшения сообщений об ошибках, пока вы все еще разрабатываете

2. Вы случайно загружаете свое приложение через file:// протокол, например file:///some/path/to/index.html ?

3. <div ui-view="about"> Требуется снова в about.html если вы загружаете его в родительский <div ui-view></div> файл? При данной настройке навигации / маршрутизатора, вероятно, это не требуется.

Ответ №1:

Ваш государственный URL /about -адрес, нет /about.html .

В любом случае используйте ui-sref директиву, для этого она и предназначена

 <a ui-sref="about">about</a>

Вы просто передаете имя состояния (и любые параметры, см. Документацию), и он создаст для вас правильный URL-адрес с учетом любой $locationProvider.html5mode конфигурации.

Если вы загружаете приложение через file:///some/path/to/index.html , запросы AJAX к вашим шаблонам (ie about.html ) могут не работать. Вы должны использовать HTTP-сервер для локальной разработки.

Взгляните (или даже просто клонируйте в качестве основы) на проект angular-seed. Это обеспечивает отличную отправную точку для первой разработки Angular.

1. Эй, Филл, похоже, это действительно проблема. Однако недавно я разработал небольшое двухстраничное приложение с ui-router, и у меня не было проблем с ним ни в Chrome, ни в Firefox, поэтому я озадачен этим. Я добавил весь путь к файлу, и, похоже, это сработало.

2. @tfantina вы использовали templateUrl в этом приложении? Возможно, вы настроили свой браузер на разрешение локальных запросов AJAX или предоставляли свои встроенные шаблоны, например <script type="text/ng-template" id="about.html">...</script>

Ответ №2:

Вы ошибочно указываете URL-адрес состояния

ваш код <li><a href="#/about.html">about</a></li>

Вы можете получить доступ к состоянию по URL-адресу из браузера, но ссылаться на другой раздел приложения — плохая практика, хотя она все еще работает

<li><a href="#/about">about</a></li>

Сделайте это

 <li><a ui-sref="about">about</a></li>

Ответ №3:

ваш URL-адрес состояния является ошибкой, является / about not /about.html

Попробуйте это

 <li><a ui-sref="about">about</a></li>

Ответ №4:

Для работы ссылки вам необходимо использовать

     <a href="#/about">about</a>

вместо

     <a href="#/about.html">about</a>.

Также для извлечения содержимого, подобного привязке данных, вам необходимо использовать контроллер.

Ответ №5:

Попробуйте это, просто убедитесь test.html будь там.

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
            <script>
                var module = angular.module("sampleApp", ['ngRoute']);

                module.config(['$routeProvider',
                function($routeProvider) {
                    $routeProvider.
                        when('/route1', {
                            controller: 'myCtrl',
                            templateUrl: 'test.html'
                        }).
                        otherwise({
                            redirectTo: '/'
                        });
                }]);

              module.controller("MainController", function($scope) {

        });

        module.controller("myCtrl", function($scope) {
            $scope.my = 10;
            ab = function() {
                alert($scope.my);
            }
        });
            </script>
        </head>
        <body ng-app="sampleApp">
          <div ng-controller="MainController"> 
               <a href="#/route1" role="button">Route</a> 
                <ng-view>

                </ng-view> 
            </div> 
        </body>
    </html>

1. @Phil: Но что, если, естественно, это может быть то же самое?

2. Да, я отредактировал его, потому что tfantina использовала концепцию состояния в маршрутизации 😉

3. Похоже, это часть решения, но оно по-прежнему не передает никакого содержимого из других шаблонов.

4. @tfantina: я обновил свой ответ, пожалуйста, попробуйте демо-версию

5. Эй, Джингар, эта демонстрация выглядит хорошо, но кажется другой, потому что я считаю, что она использует встроенный в Angular ngRoute против ui-router. Я никогда не использовал ngRoute, вы бы порекомендовали мне использовать это?