我的 ui 路由器链接不起作用,角度
My ui-router links are not working, angularJS
这是我的索引页代码,我添加了ui-view,我的应用程序文件称为"route-app.js",并使用了bower angular 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'
})
}]);
每次我点击链接时都不会弹出。我在这里做错了什么。
$StateProvider
应该$stateProvider
(第一个字母是小写)
请参阅此处的文档以供参考:https://github.com/angular-ui/ui-router。
还要打开您的开发控制台,可能会有一些控制台错误,这些错误可能会帮助您找出问题所在
angular.module('router', ['ui.router'])
.config(['urlRouterProvider', '$stateProvider', function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
问题是,您已经使用数组表示法进行依赖注入,但实际上您没有注入任何东西。
所以你有几个错误。
首先,也是最重要的一点,是在包含角度本身之前定义自定义脚本。因此,如果您查看控制台,您将看到"参考错误:角度未定义"错误。
第二和第三,正如亚历克斯和维沙尔所指出的,注射是错误的。这是更新的 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)。它将为您提供脚本中发生的错误。
注意:可以在 angular 库之前包含自定义脚本,但这毫无意义,需要额外的代码才能使其工作,所以不要这样做。
在脚本文件中,将 templateUrl 属性的值从 'home.html' 更改为 './home.html'。你必须提供根目录。仅提供文件名是行不通的。
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: './home.html'
})
}]);
首先,你应该使用 ui-sref
属性而不是普通的 href
属性来使 ui-router 正常工作。其次,您的链接不应包含主题标签。在这种情况下,它必须是"/",而不是"#/"。
- 带有凭据的角度文件上载(CORS)不起作用
- 角度ng变化或ng点击选择can'不起作用
- ng disabled在chrome中不起作用.按钮在角度上未禁用
- 角度无线电按钮ng模型不起作用
- 角度 JS + 重定向不起作用
- 角度Js ng-disabled不起作用
- 角度过滤器和ng点击不起作用
- 角度去抖动(ng模型选项)不起作用
- 带有粘性标题的角度ng视图不起作用
- 我的角度形式输入[数字]验证不起作用
- 角度限制过滤器's的第二参数“s”;“开始”;在Angular 1.3中似乎不起作用
- 新的自定义角度指令不起作用
- 对于使用传递的数据计算的局部范围变量,角度绑定在自定义指令中不起作用
- 角度指令双向绑定不起作用
- 角度2触发器'单击'使用jquery不起作用
- 角度控制器服务承诺不起作用
- 角度 ng 点击在 ng 重复中不起作用
- 专注于输入角度不起作用
- 角度灯箱不起作用.我做错了什么
- ng,如果角度不起作用