Question

除了public部分之外，具有Spring Boot后端的AngularJS站点还有许多secure个url模式。所有public网址格式都属于模型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路由共享一个控制器？

这是当前的目录结构。我希望public1目录转换为public并能够映射我想要放入的特定网址模式：

此外，我的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_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'
})

Answer 1

如何更改下面的代码，以便扩展n个公开路由可以有效地共享同一个控制器吗？

您可以将一个控制器关联到多个路径（视图），只需将其分配到 $ 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: '/'
  });
})

您还可以设置控制器别名，如下所示：

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

我找到了以下内容，但是将其放在上面的代码中，一个人如何在不诉诸的情况下将所有内容与之联系起来把它留在hello.js？

如果我提出了您的问题，您只需将 $ routeProvider 放在单独的 routeProvider.js 文件中，并将其包含在 index.html <中/ strong>即可。控制器/控制器也是如此。

我建议你看看：

AngularJS Controllers Documentation

AngularJS $routeProvider Documentation

Follow the first lesson of - CodeSchool - Staying Sharp with AngularJS

EggHead.io AngularJS Screencasts

还要看一下StackOverflow上的那些Q / A：

Using one controller for many coherent views across multiple HTTP requests

Views sharing same controller, model data resets when changing view

Controlling multiple views in one controller in AngularJS

Can I use one controller updating two views in AngularJS?

我希望我一直很有帮助。

如何在AngularJS中映射许多路线？

1 个答案: