Global”;应用程序“;AngularJS中的控制器

Global "App" controllers in AngularJS

本文关键字：AngularJS 控制器 应用程序 Global      更新时间：2023-09-26

我在一些教程和代码示例中注意到，互联网开发人员在其应用程序和模块中使用全局AppController。

在AngularJS中创建全局AppController是最佳实践吗

我确实看到了一些好处，比如能够在"全局"范围内处理事件，例如：

app.controller('AppController', function($scope, $rootScope, $route, $location){
    $rootScope.$on('$routeChangeStart', function(event, current, previous) {
        console.log('Do something...');
    });
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        console.log('Do something...);
    });
});

这种模式还有其他优点或缺点吗？

纯粹在情境中。让我们举一个动态更改标题标签和页面视图的例子：

.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
 $routeProvider.when('/', {
    template: '/views/home.html',
    title:'Home'
  });
  $locationProvider.html5Mode(true);
}]);
.controller('app', ['$scope','$route','$location',function($scope,$route,$location){
  $scope.$on("$routeChangeSuccess",function($currentRoute,$previousRoute ){
    $scope.title = $route.current.title;
    $scope.page = $route.current.template;
  });
}]);

现在，我们的标题和页面视图都是通过封装应用程序的应用程序级控制器动态加载的。这可能非常有用。

<html lang="en" ng-controller="app">
<head>
<title>{{title}}</title>
</head>
<body>
<ng-include src="page"></ng-include>
</body>
</html>

下面是一个不使用它的例子。假设我们的一个部分页面从API返回数据：

<!-- search.html -->
<div ng-repeat="item in items">
{{item.title}}
</div>

在我们的应用程序级控制器中，我们通过广播提取数据：

$scope.$on('searchComplete',function(d){
  $scope.items = d
});

然而，该分部将按我们的意图显示数据——当其他子分部使用范围被覆盖的items时，可能会出现问题。

<!-- other-search.html -->
<div ng-controller="OtherSearch" ng-click="search()">
<div ng-repeat="item in items">
{{item.title}}
</div>
</div>

在这部分中，ng-click正在引导用户的请求。因此，如果应用级控制器已经在父级中绑定了items，则用户在切换到此部分时将看到项目列表，即使他们从未触发search()的操作。

相关文章：