Question

我是AngularJs的新手，我正试图让这条ui-route工作，但没有运气。这是我的.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]"

Answer 1

这是我的app.js与ui-router的一个例子。

'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");
});

Answer 2

我有同样的问题。但我通过使用来自unpkg.com的最新版本的angular-ui-router.js来解决我的问题。我使用版本3.2。

AngularJs ui-route“无法解决状态”错误

2 个答案: