Question

我注意到一些教程和代码示例浮现在互联网开发人员的应用程序和模块中使用全局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...);
    });
});

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

Answer 1

纯粹是在情境的背景下。我们举一个动态更改标题标签和页面视图的示例：

.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()的操作。

AngularJS中的全局“App”控制器

1 个答案: