Question

我是AngularJ的新手，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', ...])

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

AngularJ，路由，创建多个路由时遇到问题

1 个答案: