首页 / JAVASCRIPT / javascript-使用routeProvider的模板的多个控制器

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-使用routeProvider的模板的多个控制器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2627字，纯文字阅读大概需要4分钟。

内容图文

我开始使用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>

内容总结

以上是互联网集市为您收集整理的javascript-使用routeProvider的模板的多个控制器全部内容，希望文章能够帮你解决javascript-使用routeProvider的模板的多个控制器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/678171.html

来源：【匿名】