AngularJs，路由，创建多个路由的问题答案

【问题标题】：AngularJs, routing, problem creating several routesAngularJs，路由，创建多个路由的问题
【发布时间】：2021-01-01 10:04:37
【问题描述】：

我是 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 模块，但这是教程完成的方式。它不起作用（没有显示每个路由模块的不同模板），我无法弄清楚。

【问题讨论】：

这个问题现在没有路由工作了吗？
您似乎引导了没有依赖关系的app 模块。另一方面，它在那里什么也不做。它应该依赖于about 模块等等
你只需像你一样设置angular.module('app', ['home', 'about']);
哈哈 :) 好的。很高兴听到它有帮助。但是，我认为这次你不应该过多地研究 AngularJs，因为它太过时了:)
是的，我知道，但我刚得到一份新工作，我工作的公司使用 AngularJs :/ 再次感谢！

标签： javascript angularjs module angular-ui-router

【解决方案1】：

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

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

另一件事是关于将指令属性 ui-sref 设置为 <a ui-sref="home" /> 以最好地与 ui-router 模块一起使用，而不是 #/home 与 ngRoute 一起使用

【讨论】：