使用ui-router的基于组件的路由| AngularJS

问题描述 投票:0回答:1

我们已经使用[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>`
    })
angularjs angularjs-directive angular-ui-router angular-components
1个回答
0
投票

您注册了组件的应用模块为contactApp。您需要将html更改为该应用程序模块:

<div ng-app="contactApp">
© www.soinside.com 2019 - 2024. All rights reserved.