AngularJS маршрутизация не работает

0

Я новичок в AngularJS, и сейчас я создаю небольшое приложение. Я хочу, чтобы мой URL как этот /index (без.html). Я попытался использовать NgRoute для этого, но, похоже, он не работает хорошо. Когда я иду в/учреждения, он говорит, что маршрут не существует. Вот мой код:

app.js

var app = angular.module('khApp', ['ngRoute','establishmentModule', 'queryModule', 'buildingBlockModule', 'categoryModule']);
app.config(['$routeProvider', function($routeProvider)
{
  $routeProvider
    .when('establishments', {controller:'testController', templateUrl: '../html/establishments.html'})

}]);

app.controller('testController', ['$http', function($http)
{


}]);

index.html

    <div  ng-controller="testController as test" class="container">
        hi 
        <a href="establishments">
            <button class="btn btn-default">Start</button>
        </a>
    </div>

  <ng-view></ng-view>

<script type="text/javascript" src="../../bower_components/angular/angular.js"></script> 
<script type="text/javascript" src="../../bower_components/angular-route/angular-route.js"></script> 
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/buildingblock.js"></script>
<script type="text/javascript" src="../js/category.js"></script>
<script type="text/javascript" src="../js/establishment.js"></script>
<script type="text/javascript" src="../js/query.js"></script> 


</body>
</html>

Что я делаю не так? Заранее спасибо!

  • 0
    Какой URL вы вводите в браузере? Полный URL, пожалуйста (хотя вы можете опустить реальное имя хоста)
Показать ещё 1 комментарий
Теги:
angular-ui-router

3 ответа

1
Лучший ответ

В зависимости от того, как настроен ваш маршрутизатор, обычно вам необходимо настроить маршруты, начинающиеся с косой черты:

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('establishments', {
                controller:'testController',
                templateUrl: '../html/establishments.html'
            });
}]);

Кроме того, в вашем HTML, я думаю, что ваши HTML-привязки должны начинаться с хеш-навигации так:

<a href="#/establishments">
    <button class="btn btn-default">Start</button>
</a>

Ссылка: Учебное пособие по AngularJS 7 - Маршрутизация и множественные представления

  • 0
    Это решение работает, но оно загружает файл creation.html в index.html. Я стремлюсь к тому, чтобы маршрут загружал целую новую страницу, в данном случае, так называемуюведения.
  • 1
    В этом случае, я думаю , что все , что вам нужно сделать, это иметь establishments.html в вашем якорный тег , как ваш href . Маршрутизатор предназначен для использования в стиле разработки одностраничных приложений (spa). В этом случае при переходе по странице вся предыдущая обработка JS будет потеряна. Вам необходимо включить в соответствующие части кода на establishments.html странице , а также. Использование роутера для навигации между двумя совершенно разными страницами будет бессмысленным.
Показать ещё 2 комментария
1

Маршрутизация AngularJS использует идентификатор фрагмента (# в URL-адресе) для получения маршрутов. Это потому, что он не может манипулировать полным URL-адресом, не заставляя браузер запрашивать новую страницу, что делает его не SPA.

Таким образом, URL-адрес, который вам нужно запросить, должен быть формой <path to root>#/establishments. Предполагая, что index.html находится в /application/app/html, URL-адрес для запроса:

/application/app/html/index.html#/establishments

Если вы также хотите поддерживать URL-адрес localhost:port/application/app/html/establishments вам необходимо настроить маршрутизацию на стороне сервера, чтобы выполнить перенаправление на /application/app/html/index.html#/establishments.

0

#/установки - это то, что вам нужно в тэге привязки

<a href="#/establishments">
<button class="btn btn-default">Start</button>
</a>

ваш маршрут будет примерно таким:

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
        .when('establishments', {
            controller:'testController',
            templateUrl: '../html/establishments.html'
        });
}]);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню