AngularJs，路由，创建多条路由时出现问题

Question

我是 AngularJs 的新手，也是 ui-router 的新手。我似乎在创建多条路线时遇到了问题。这就是我继续进行的方式，从教程中启发自己但未能重现结果。这是我的不同文件： 1/index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="js/lib/angular.js"></script>
    <script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">

            <a href="#/">Home</a>
            <a href="#/about">About</a>
            <a href="#/contact">Contact</a>

        <ui-view></ui-view>
    </div>

    <script src="js/app.js"></script>
    <script src="js/components/about/about.js"></script>
    <script src="js/components/about/about.component.js"></script>
    <script src="js/components/home/home.js"></script>
    <script src="js/components/home/home.component.js"></script>
    <script src="js/components/contact/contact.js"></script>
    <script src="js/components/contact/contact.component.js"></script>
</body>
</html>

2/app.js

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

3/about.js

angular
    .module('about', ['ui.router']);

4/about.component.js

const about = {
    template: '<div class="about">About</div>'
};
    
angular
    .module('about', ['ui.router'])
    .component('about', about)
    .config(function ($stateProvider) {
        $stateProvider.state({
            name: 'about',
            url: '/about',
            component: 'about',
            // template: "<div>About</div>"
        })
    });

home 有 2 个相似文件，contact 有 2 个相似文件。

显然有问题，因为我们只调用了 app 模块而不是 contact, home, about 模块，但教程就是这样完成的。它不起作用（每个路由模块的不同模板未显示）我无法弄清楚。

Answer 1

为了确保所有模块都得到相应的引导，只需将它们全部设置为 app 模块的 deps:

angular
  .module('app', ['home', ...])

还有一件事是为 <a ui-sref="home" /> 设置指令属性 ui-sref 以最好地与 ui-router 模块一起工作，而不是与 ngRoute 一起工作的 #/home

AngularJs，路由，创建多条路由时出现问题

AngularJs, routing, problem creating several routes

javascript

module

angularjs

angular-ui-router