首页 > 编程语言> > javascript-使用routeProvider的模板的多个控制器

javascript-使用routeProvider的模板的多个控制器

2019-10-29 20:36:48 作者：互联网

我开始使用AngularJS开发我的第一个大型项目,而我在考虑应用程序的设计时,发现了一些我不理解的东西.

我在单页应用程序中进行思考,因此我正在使用ng-view和routeProvider将每个查询路由到正确的模板和控制器.但是,我的某些模板有些复杂,因此我首先想到了使用不同的控制器来管理每个模板.也就是说,同一模板的不同部分将由不同的控制器管理.问题(或至少我认为是问题)是routeProvider仅允许将一个模板与一个控制器关联.这使我认为除了在使用routeProvider的路由配置中指定的模板之外,不能将其他控制器用于模板.

然后,我开始弄清楚如何重组未来的项目,以便可以在由单个控制器管理的同一模板中维护每个不同的功能,并且仍然允许它们之间的交互控制器.

经过一番头痛之后,我决定尝试实施我的第一种方法,看看它是如何失败的……真是个惊喜！效果很好！但是,我不知道为什么.

让我向您展示这个简单的示例：

script.js

angular.module('myApp', [
  'ngRoute'
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'MainCtrl' 
      });

    $locationProvider.html5Mode(true);
  });

angular.module('myApp')
  .controller('MainCtrl', function ($scope) {
    // whatever...
    });
  });

angular.module('myApp')
  .controller('FirstCtrl', function ($scope) {
      $scope.first = function(){
           alert("First");
      };
    });
  });

angular.module('myApp')
  .controller('SecondCtrl', function ($scope) {
      $scope.second= function(){
           alert("Second");
      };
    });
  });

main.html

<div ng-controller="FirstCtrl">
    <button ng-click="first()">First!</button>
</div>

<div ng-controller="SecondCtrl">
    <button ng-click="second()">Second!</button>
</div>

index.html

<body ng-app="myApp">
    <div ng-view=""></div>
</body>

我以为如果配置将“主”模板关联到“ MainCtrl”控制器的路由,那将是与模板交互的唯一控制器,但事实并非如此.

我首先以为找不到“第一”和“第二”功能,因为在路由配置中未声明“ FirstCtrl”和“ SecondCtrl”.我想也许routeProvider会“包装”(或类似的东西)“主”模板和“ MainCtrl”控制器,而“主”模板将无法访问其余的控制器.

但这是不正确的,来自不同控制器的“第一”和“第二”功能可以正常工作.那么,在路由配置中为模板指定控制器有什么意义呢？您可以只设置一个模板以为指定的查询呈现,并且该模板可以使用模块的任何控制器.

我不知道这可能不是一个好的设计.

您能帮我更好地理解吗？

谢谢！

解决方法:

当您使用$route provider进行说明时：

.config(function ($routeProvider, $locationProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'main',
    controller: 'MainCtrl' 
  });

$locationProvider.html5Mode(true);  });

您实际上是使用MainCrtl将所有内容包装在“ ./”路由中.

因此,当您在< div ng-view =>< / div>中注入Main.html视图时,您得到以下渲染：

 <body ng-app="myApp">
    <div ng-controller='MainCtrl'>    
       <div ng-controller="FirstCtrl">
       <button ng-click="first()">First!</button>
       </div>

       <div ng-controller="SecondCtrl">
       <button ng-click="second()">Second!</button>
       </div>
    </div>

 </body>

标签：route-provider,angularjs,templates,javascript
来源： https://codeday.me/bug/20191029/1962724.html