AngularJs，路由，创建多个路由的问题
Posted
技术标签:
【中文标题】AngularJs，路由，创建多个路由的问题【英文标题】：AngularJs, routing, problem creating several routes 【发布时间】：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 :/ 再次感谢！
【参考方案1】：
为确保所有模块都得到相应的引导，只需将它们全部设置为app 模块的deps：
angular
.module('app', ['home', ...])
另一件事是关于将指令属性 ui-sref 设置为 <a ui-sref="home" /> 以最好地与 ui-router 模块一起使用，而不是 #/home 与 ngRoute 一起使用
【讨论】：
以上是关于AngularJs，路由，创建多个路由的问题的主要内容，如果未能解决你的问题，请参考以下文章