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