Блог

Главная - Вопросы по программированию - Ошибка AngularJS ui-route «не удалось разрешить состояние»

Ошибка AngularJS ui-route «не удалось разрешить состояние»

#angularjs #angular-ui-router

#angularjs #angular-ui-router

Вопрос:

Я новичок в AngularJS, и я пытаюсь заставить этот пользовательский интерфейс работать, но безуспешно. Это фрагмент моего файла .js, содержащий конфигурацию маршрута.

 //object for routing
var route = angular.module('route', ["ui.router"])

// configure the routing        
route.config(function($stateProvider, $urlRouterProvider) {

    // send to profile page
    $urlRouterProvider.otherwise("/personal_info");

    $stateProvider        // route for personal info
    .state('personal_info', {
            url: "/personal_info",
            templateUrl : 'personal_info.html' ,
            controller : 'persController'
    })
});

И это мой HTML-файл, в котором я пытаюсь внедрить ui-veiw и реализовать панель навигации с маршрутизацией.

 <!DOCTYPE html>
<html ng-app='app'>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, pre-check=0, post-check=0, max-age=0" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js">    </script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-resource.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
  <script src="client_UI.js"></script>
  <script src="angular.js"></script>
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
 <link rel = "stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel = "stylesheet" type="text/css" href="css/mycss.css">  </head>
 <body>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.js"></script><!-- navigation bar -->

    <div class="navbar-header">
            <a class="brand" ui-sref="#">Home</a>
    <ul class="nav nav-pills">
            <li><a class="active" ui-sref="personal_info">Personal Info</a></li>
            <li><a ui-sref="cog_health">Cognitive Health</a></li>
            <li><a ui-sref="gen_health">General Health</a></li>
    </ul>
    </div>

<div class="container">
<div ui-view></div>
</div>
</div>
</body>
</html>

Я получаю эту ошибку, которая гласит: «Ошибка: не удалось разрешить ‘peronal_info’ из состояния»
transitionTo@http://angular-ui.github.io/ui-router/release/angular-ui-router.js:1971 …». Может кто-нибудь, пожалуйста, дать мне подсказку о том, как решить эту проблему?

Спасибо

ОБНОВЛЕНИЕ: я исправил проблему с синтаксисом, и теперь я получаю ошибку, которая выглядит следующим образом ,

 "GET http://localhost:3000/personal_info.html [HTTP/1.1 401 Unauthorized 1ms]"

Комментарии:

1. Не следует ли angular-ui-router.js быть загружены до app.js (angular.js или client_ui.js )?

2. Я изменил свой код и загрузил angular-ui-router.js до того, как angular.js и client_ui.js но я все еще получаю ту же ошибку

3. Если personal_info — ваше единственное состояние, вы пытались изменить его на index? Не совсем уверен, но ui-router может потребоваться состояние индекса по умолчанию. (поправьте меня, если я ошибаюсь)

4. Что вы подразумеваете под состоянием индекса? Это что-то вроде … «<a class=»brand» ui-sref=»#»>Home</a>»? И я показываю только одно состояние в коде. У меня есть другие, но мне нужно выполнить эту работу, прежде чем я перейду к другим. Спасибо за помощь, высоко ценится

5. Поскольку это 401, это заставило меня искать неправильно определенный базовый тег, но его не было. Но какой URL-адрес вы используете для получения вашего «index.html » (или как вы это назвали) … поскольку вы не находитесь в режиме html5, при работе в виртуальных каталогах могут возникнуть некоторые остаточные проблемы…

Ответ №1:

Вот пример моего app.js с пользовательским интерфейсом-маршрутизатором.

 'use strict';


  angular.module('srcApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router'
])
  .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
      .state('lang', {
        url: '/:lang',
        templateUrl: '../views/interface.html',
        controller:'MainCtrl'
      });

    $locationProvider.html5Mode(true).hashPrefix('!');
    $urlRouterProvider.when('/', '/en');
    $urlRouterProvider.otherwise('/en');
  });

Я бы посоветовал попробовать что-то с вашим, например:

 //object for routing
var app = angular.module('app', ["ui.router"]);

// configure the routing        
app.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider        // route for personal info
    .state('index', {
            url: "/personal_info",
            templateUrl : 'personal_info.html' ,
            controller : 'persController'
    });

    // send to profile page
    $urlRouterProvider.otherwise("/personal_info");
});

Комментарии:

1. Вы спасаете жизнь! Большое спасибо. Не могли бы вы объяснить, почему мы используем ‘index’ в качестве состояния, а не personal_info?

2. Я просто не уверен (отсюда и лень в этот праздничный день), требует ли ui-router состояния индекса или нет.

Ответ №2:

У меня была такая же проблема. Но я решаю свою проблему, используя последнюю версию angular-ui-router.js от unpkg.com . Я использую версию 3.2.

Метки: