我的ui路由器链接不起作用，angularJS
[英]My ui-router links are not working, angularJS
问题描述
继承人我的索引页面代码，我添加了ui-view，我的应用程序文件称为“ route-app.js”，并使用了凉亭角ui-router。
<!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's 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'
})
}]);
每次我单击链接时都不会弹出。 我在这里做错了什么。
5 个解决方案
解决方案1
0 2016-01-27 03:19:06
$StateProvider应为$stateProvider （首字母为小写）
请参阅此处的文档以获取参考： https : //github.com/angular-ui/ui-router 。
同时打开您的开发控制台，可能会出现一些控制台错误，这些错误可能有助于您找出问题所在。
解决方案2
0 2016-01-27 04:16:20
angular.module('router', ['ui.router'])
.config(['urlRouterProvider', '$stateProvider', function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
事实是，您已使用数组符号进行依赖项注入，但实际上并未注入任何东西。
解决方案3
0 2016-01-27 14:02:13
好的，所以您有几个错误。
首先，也是最重要的一点是，您在定义angular之前定义了自定义脚本。 因此，如果您查看控制台，将会看到“参考错误：未定义角度”错误。
正如Alex和Vishal所指出的，第二和第三次注射是错误的。 这是更新的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键）。 它会给您脚本中出现的错误。
注意 ：可以在角度库之前包含自定义脚本，但这是没有意义的，并且需要额外的代码才能使其起作用，所以不要这样做。
解决方案4
0 2017-06-28 06:07:02
在脚本文件中，将templateUrl属性的值从'home.html'更改为'./home.html' 。 您必须提供根目录，仅提供文件名将不起作用。
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: './home.html'
})
}]);
解决方案5
0
首先，您应该使用ui-sref属性而不是普通的href属性来使ui-router正常工作。 其次，您的链接不应包含井号。 在这种情况下，它必须是“ /”，而不是“＃/”。
链接不适用于Angular UI路由器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.