我的ui路由器链接不起作用，angularJS
[英]My ui-router links are not working, angularJS
问题描述
Heres My code for my index page, I added ui-view and my app file is called "route-app.js" and have used bower angular ui-router. 
继承人我的索引页面代码，我添加了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 router Js file UI路由器Js文件
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
}]);
Every time I click on the links not pops up. 每次我单击链接时都不会弹出。 What have I done wrong here. 我在这里做错了什么。
5 个解决方案
解决方案1
0 2016-01-27 03:19:06
$StateProvider should be $stateProvider (the first letter is lowercase) $StateProvider应为$stateProvider （首字母为小写）
Refer to the documentation here for reference: https://github.com/angular-ui/ui-router . 请参阅此处的文档以获取参考： https : //github.com/angular-ui/ui-router 。
Also open up your development console, there may be some console errors that might assist you in figuring out what the problem is 同时打开您的开发控制台，可能会出现一些控制台错误，这些错误可能有助于您找出问题所在。
解决方案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'
});
}]);
The thing is that, you have used array notation for dependency injection but you actually did not inject anything. 事实是，您已使用数组符号进行依赖项注入，但实际上并未注入任何东西。
解决方案3
0 2016-01-27 14:02:13
Ok so you have a couple errors. 好的，所以您有几个错误。
The first, and the most important, is that you define your custom scripts prior to including angular itself. 首先，也是最重要的一点是，您在定义angular之前定义了自定义脚本。 So if you look at the console you will see a 'Reference Error: angular is not defined' error. 因此，如果您查看控制台，将会看到“参考错误：未定义角度”错误。
Second and third, as Alex and Vishal noted, the injection is wrong. 正如Alex和Vishal所指出的，第二和第三次注射是错误的。 Here are the updated HTML (I removed all the unecessary comments from your code to make it clear where I changed anything. You can of course keep them in your page): 这是更新的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>
and the script: 和脚本：
angular.module('router', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
As an advice, make use of the browser console (by pressing F12). 作为建议，请使用浏览器控制台（按F12键）。 It will give you the errors occuring in your scripts. 它会给您脚本中出现的错误。
Note : It is possible to include the custom scripts prior to the angular library, but it's pointless and needs extra code to make it work, so don't do it. 注意 ：可以在角度库之前包含自定义脚本，但这是没有意义的，并且需要额外的代码才能使其起作用，所以不要这样做。
解决方案4
0 2017-06-28 06:07:02
In the script file , change the value oftemplateUrl attribute from 'home.html' to './home.html' . 在脚本文件中，将templateUrl属性的值从'home.html'更改为'./home.html' 。 You have to give root directory.Just giving the file name will not work. 您必须提供根目录，仅提供文件名将不起作用。
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: './home.html'
})
}]);
解决方案5
0
First of all, you should use the ui-sref attribute and not a plain href attribute to make ui-router work properly. 首先，您应该使用ui-sref属性而不是普通的href属性来使ui-router正常工作。 Second, your link should not contain a hashtag. 其次，您的链接不应包含井号。 In this case, it has to be "/", not "#/". 在这种情况下，它必须是“ /”，而不是“＃/”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.