Javascript 如何在ui路由器AngularJS中使用ui sref_Javascript_Angularjs_Angular Ui Router_Angularjs Components

Javascript 如何在ui路由器AngularJS中使用ui sref

javascript angularjs

Javascript 如何在ui路由器AngularJS中使用ui sref,javascript,angularjs,angular-ui-router,angularjs-components,Javascript,Angularjs,Angular Ui Router,Angularjs Components,我有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_mo

我有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>


.navbar{边界半径：0；}
家
关于

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

var-app=angular.module（“导航模块”、“ui.router”、“ui.bootstrap”）；
应用组件（'navComponent'{
templateUrl:“./navbar.component.html”
});
app.config（['$stateProvider'，
“$urlRouterProvider”，函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.state（“/home”{
名称：'主页'，
url:“/home”，
模板：“你好，世界！”
})
.state（“/about”{
url:“/关于”，
组件：“导航组件”
});
$urlRouterProvider。否则（'/home'）；
}]);

和nav-bar.component.html：

<h1>nav bar</h1>

导航条但我无法单击标记运行页面，当我在URL中更改/about时，控制台显示错误：

未能加载模板：./navbar.component.html

我不知道为什么。

我认为您缺少templateurl位置或文件名，因为您提到您的 templateUrl:“./navbar.component.html”，但您的文件名是nav-bar.component.html

首先删除templateUrl并使用组件中的模板：

nav bar

检查它

如果没有问题，那么您的错误就是缺少templateUrl引用或文件名

然后使用../app/navtemplateurl.html修复此问题，文件名为navtemplateurl.html，位于app文件夹中在模块中添加“ui.bootstrap.tpls”也可以解决此问题

更新：必须将angularui路由器引用从索引文件更改为

，因为v0.4.2或更早版本不支持ui路由器中的组件模板。你还需要更新这个

是的，我在状态中删除了相同的问题“/”，ui路由正在工作。但是它也不能解决加载模板的问题，现在可以吗？我在我的本地机器上运行它，它完全正常。我想我和那个链接有相同的问题：。但当我在服务器上运行它时，它显示了与在索引文件的头的顶部部分中使用相同的问题