У меня не работают ссылки на ui-router, angularJS

0

Heres Мой код для моей индексной страницы, я добавил ui-view, и мой файл приложения называется "route-app.js" и использовал угловой ui-маршрутизатор.

   <!DOCTYPE html>

<html lang="en" ng-app="router">
  <head>
      <!-- JS dependencies -->
<!-- AngularJS library -->
          <script src="route-app.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
      <script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

<!-- AngularJS UI-Router -->
<!-- Our application -->

      <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <h1></h1>
      <a href="#/"></a>

<div ui-view></div>


    <!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

UI-маршрутизатор Js файла

angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
    $urlRouterProvider.otherwise('/');

    $StateProvider

        .state('home', {
        url: '/',
        templateUrl: 'home.html'
    })

}]);

Каждый раз, когда я нажимаю ссылки, вы не всплываете. Что я сделал неправильно здесь.

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

5 ответов

0

Прежде всего, вы должны использовать атрибут ui-sref а не простой атрибут href чтобы заставить ui-router работать правильно. Во-вторых, ваша ссылка не должна содержать хэштег. В этом случае это должно быть "/", а не "#/".

Поделиться
0

В файле сценария измените значение атрибута ttemplateUrl с 'home.html' на './home.html'. Вы должны указать корневой каталог. Простое указание имени файла не будет работать.

angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
    $urlRouterProvider.otherwise('/');

    $StateProvider

        .state('home', {
        url: '/',
        templateUrl: './home.html'
    })

}]);
Поделиться
0

Итак, у вас есть пара ошибок.

Первое, и самое главное, - это то, что вы определяете свои пользовательские сценарии до включения самого углового. Поэтому, если вы посмотрите на консоль, вы увидите ошибку "Ошибка ссылки: угловая не определена".

Второе и третье, как заметил Алекс и Вишал, инъекция ошибочна. Вот обновленный HTML (я удалил все ненужные комментарии из вашего кода, чтобы было ясно, где я что-то изменил. Конечно, вы можете сохранить их на своей странице):

<!DOCTYPE html>

<html lang="en" ng-app="router">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
    <script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

    <!-- JS dependencies: MUST COME AFTER THE ANGULAR DEPENDENCIES -->
    <script src="route-app.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <h1></h1>
   <a href="#/"></a>

   <div ui-view></div>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
  </body>
</html>

и сценарий:

angular.module('router', ['ui.router'])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
        url: '/',
        templateUrl: 'home.html'
    });

  }]);

В качестве совета используйте консоль браузера (нажав F12). Это даст вам ошибки, возникающие в ваших скриптах.

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

Поделиться
0 
angular.module('router', ['ui.router'])
.config(['urlRouterProvider', '$stateProvider', function($urlRouterProvider, $StateProvider){
    $urlRouterProvider.otherwise('/');

    $StateProvider

        .state('home', {
        url: '/',
        templateUrl: 'home.html'
    });

}]);

Дело в том, что вы использовали обозначение массива для инъекции зависимостей, но на самом деле вы ничего не вводили.

Поделиться
0

$StateProvider должен быть $stateProvider (первая буква - строчная)

Обратитесь к документации здесь для справки: https://github.com/angular-ui/ui-router.

Также откройте свою консоль разработки, могут быть некоторые ошибки консоли, которые могут помочь вам разобраться, в чем проблема

Поделиться

Ещё вопросы

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