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

【问题标题】：Component based routing using ui-router | AngularJS使用 ui-router 的基于组件的路由 | AngularJS
【发布时间】：2020-03-17 07:38:47
【问题描述】：

我们使用 angularjs@1.6 和 angular-ui-router@1.0.0-rc.1 创建了一个名为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 angularjs-components

【解决方案1】：

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

<div ng-app="contactApp">

编辑

如果我们假设 app 是主应用程序模块并且声明了其他模块，那么所有其他模块都必须像这样在该主应用程序下注册：

angular.module('app', ['contactApp']);

然后在 html 中使用 app，就像你已经做的那样：

<div ng-app="app">

*您也可以在同一个html中拥有多个应用程序，但这不是推荐的方式

【讨论】：

假设我们有多个组件及其各自的模块；例如 home 和 contact。我们是否必须在主页的公共模块下注册应用程序？