У меня есть файл 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>
и файл 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');
}]);
и nav-bar.component.html:
<h1>nav bar</h1>
но я не могу щелкнуть тег, чтобы запустить страницу, и когда я изменяю / о в URL-адресе, выводится сообщение об ошибке консоли:
Не удалось загрузить шаблон: ./navbar.component.html
Не знаю почему.