[英]How to use ui-sref in ui-router AngularJS
i have file index.html: 我有文件index.html:
<!DOCTYPE html>
<html>
<head>
<style>
.navbar { border-radius:0; }
</style>
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<script src="./node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/js/app.js"></script>
</head>
<body ng-app="nav-module">
<a ui-view="home" ui-sref="home" ui-sref-active="active">home</a>
<a ui-view="about" ui-sref="about" ui-sref-active="active">about</a>
<ui-view>
</ui-view>
</body>
</html>
and file app.js: 和文件app.js:
var app = angular.module("nav-module", ["ui.router",'ui.bootstrap']);
app.component('navComponent',{
templateUrl: './navbar.component.html'
});
app.config(['$stateProvider',
'$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('/home',{
name: 'home page',
url:'/home',
template: '<h3>hello world!</h3>'
})
.state('/about',{
url:'/about',
component: 'navComponent'
});
$urlRouterProvider.otherwise('/home');
}]);
and nav-bar.component.html: 和nav-bar.component.html:
<h1>nav bar</h1>
but i can't click to tag to run page, and when i change /about in URL, the console show error: 但是我无法单击以标记以运行页面,并且当我在URL中更改/ about时,控制台显示错误:
Failed to load template: ./navbar.component.html
无法加载模板:./navbar.component.html
i dont know why. 我不知道为什么。
I think you're missing the templateurl location or file name as you mention that your templateUrl:'./navbar.component.html' but your file name is nav-bar.component.html. 我认为您缺少templateurl位置或文件名,因为您提到templateUrl:'./ navbar.component.html',但文件名是nav-bar.component.html。
<h1>nav bar</h1>
in component. <h1>nav bar</h1>
进行检查。 Adding 'ui.bootstrap.tpls' in your module can also solve this problem 在模块中添加“ ui.bootstrap.tpls”也可以解决此问题
Update : ust change the angularui router refrence from index file to <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>
as component templates in ui-router are not supported in v0.4.2 or earlier. 更新 :将angularui路由器的引用从索引文件更改为
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>
v0.4.2或更早版本不支持<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>
作为ui-router中的组件模板。 You also need to update this. 您还需要更新它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.