gpt4 book ai didi

javascript - 如何在 AngularJS 中映射多个路由?

转载 作者:行者123 更新时间:2023-11-30 16:24:14 26 4
gpt4 key购买 nike

具有 Spring Boot 后端的 AngularJS 站点有许多 public除了 secure 之外的 url 模式部分。所有 public url 模式属于模型 mydomain.com/public1 , mydomain.com/public2 , mydomain.com/public3 ,依此类推,而所有安全内容都将在 mydomain.com/secure 中类似 mydomain.com/secure/one_of_many_urls 的网址格式.问题是我开始使用的示例应用程序对每条路线都有单独的模块。使用 n 路由将很难维护。

我如何设置代码以便所有 public1 , public2 , public3 , public_n路由共享一个 Controller ?

这是当前的目录结构。我想要 public1目录变成 public并能够映射尽可能多的特定 url 模式,因为我想放入它​​:

另外,我的public1.js目前为空如下:

angular.module('public1', []).controller('public1', function($scope, $http) {

});

public1 的链接路线在导航栏中处理 index.html如下:

<!doctype html>
<html>
<head>
<title>Hello Angular</title>
<!-- To produce natural routes (without the #), you need an extra <base/> element in the header of the HTML in index.html, and you need to change the links in the menu bar to remove the fragments ("#"). There are also changes in a spring controller and in the main js module. -->
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}"><a href="/">home</a></li>
<li ng-class="{active:tab('message')}"><a href="/message">message</a></li>
<li ng-class="{active:tab('public1')}"><a href="/public1">public1</a></li>
<li><a href="/login">login</a></li>
<li ng-show="authenticated()"><a href="" ng-click="logout()">logout</a></li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/auth/auth.js" type="text/javascript"></script>
<script src="js/home/home.js" type="text/javascript"></script>
<script src="js/message/message.js" type="text/javascript"></script>
<script src="js/public1/public1.js" type="text/javascript"></script>
<script src="js/navigation/navigation.js" type="text/javascript"></script>
<script src="js/hello.js" type="text/javascript"></script>
</body>
</html>

public1.html是:

<h1>Public 1</h1>
<div>
<p>This will be a public url pattern.</p>
</div>

我如何更改下面的代码以便缩放 n多少个公共(public)路由可以有效地共享同一个 Controller ?每个 public_n 路由都有自己的图像,但如果它们有任何 js 逻辑,则会共享 js 逻辑。

我找到了以下内容,但是将它放在上面代码的什么位置,以及一个人如何将所有内容链接到它而不求助于将它留在 hello.js 中? ?

.when('/public1', {
templateUrl: 'js/public/public1.html'
}
.when('/public2', {
templateUrl: 'js/public/public2.html'
}
.when('/public3', {
templateUrl: 'js/public/public3.html'
})

最佳答案

How do I change the code below so that a scaling n number of public routes can efficiently share the same controller?

您可以将一个 Controller 关联到多个路由( View ),只需将它分配给您的 $routeProvider 中的更多路由,如下所示:

myApp.config(function ($routeProvider) {

$routeProvider
.when('/public1', {
templateUrl: 'js/public/public1.html',
controller: 'myController'
})
.when('/public2', {
templateUrl: 'js/public/public2.html',
controller: 'myController'
})
.when('/public3', {
templateUrl: 'js/public/public3.html',
controller: 'myController'
})
.otherwise({
redirectTo: '/'
});
})

您还可以设置 Controller 别名,如下所示:

.when('/public1', {
templateUrl: 'js/public/public1.html',
controller: 'myController',
controllerAs: 'myCtrl'
})

I found the following, but where would one put it in the code above, and how would a person link everything to it without resorting to leaving it in hello.js?

如果我得到你的问题,你只需要将 $routeProvider 放在一个单独的 routeProvider.js 文件中,并将其包含在你的 index.html 。您的 Controller 也一样。

我建议你看看:

同时看看 StackOverflow 上的那些 Q/A:

希望我对您有所帮助。

关于javascript - 如何在 AngularJS 中映射多个路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34343843/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com