我们已经使用[email protected]和[email protected]。创建了一个名为contact的组件。问题在于单击按钮,主页上什么都没有显示。如果有人可以帮助我们找出错误。
index.html
----------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Component based routing</title>
<!--Styles-->
<!--Libs-->
<script src="../libs/angular.js"></script>
<script src="../libs/angular-ui-router.js"></script>
<!--Components-->
<script src="app.js"></script>
<script src="contact/contact.js"></script>
<script src="contact/contact.component.js"></script>
</head>
<body>
<h1>Component based routing</h1>
<div ng-app="app">
<ul>
<li>
<a href="#/contact">Contact</a>
</li>
</ul>
<h4>Test</h4>
<ui-view></ui-view>
</div>
</body>
</html>
app.js
-------
angular.module('app',[]);
contact.js
----------
angular
.module('contactApp', ['ui-router']);
contact.component.js
--------------------
angular
.module('contactApp')
.config(['$stateProvider',function ($stateProvider) {
$stateProvider.state('contact', {
url: '/contact',
component: 'contact'
})
}])
.component('contact',{
template: `<h1>Contact</h1>`
})
您注册了组件的应用模块为contactApp
。您需要将html更改为该应用程序模块:
<div ng-app="contactApp">