javascript AngularJS 全局控制器

AngularJS global controller

提问by John Dorean

In my Angular application I have a few functions which I think should be in a global controller. In server-side MVC frameworks there's usually a global controller that all other controllers extend, which is where I'd put these functions. I'm wondering if there's anything like that for Angular.

在我的 Angular 应用程序中，我有一些我认为应该在全局控制器中的函数。在服务器端 MVC 框架中，通常有一个全局控制器，所有其他控制器都扩展了它，这是我放置这些功能的地方。我想知道 Angular 是否有类似的东西。

So at the moment I have this in app.js:

所以目前我有这个app.js：

'use strict';

// Declare app level module
var app = angular.module('app', ['ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    // Possible routes can go here

}]);

And this in controllers.js:

这在controllers.js：

app.controller('DownloadsController', function ($scope) {

});

I want to be able to add downloads in my application, so I'd write a $scope.addDownload = function() { ... }in the DownloadsController. That will work, however I'd like to be able to add downloads anywhere in my application, which means calling that addDownload()function no matter what controller I'm in.

我希望能够在我的应用程序中添加下载，所以我会$scope.addDownload = function() { ... }在DownloadsController. 这会起作用，但是我希望能够在我的应用程序中的任何位置添加下载，这意味着addDownload()无论我在哪个控制器中都调用该函数。

Can I define a global controller that holds the addDownload()function and be able to call that function from all of my controllers?

我可以定义一个全局控制器来保存该addDownload()函数并能够从我的所有控制器调用该函数吗？

回答by Brian Vanderbusch

There are a few different approaches I could recommend. First, even in a server side based MVC type application, this would not be a "global" controller, rather an Aspect Oriented service... or a "decorator". Angular is really no different in that regard, in that you have the ability to decorate your scope with the desired functionality. Your options here would be:

我可以推荐几种不同的方法。首先，即使在基于服务器端的 MVC 类型应用程序中，这也不是“全局”控制器，而是面向方面的服务……或“装饰器”。Angular 在这方面确实没有什么不同，因为您可以使用所需的功能来装饰您的范围。您的选择是：

• create a download directive
• create a download provider/service/model
• extend the scope with a decorator to add the method to all of your controllers

• 创建下载指令
• 创建下载提供者/服务/模型
• 使用装饰器扩展范围以将方法添加到所有控制器

Depending on how you need to this functionality to be invoked, will determine your method of developing this feature. The most robust and portable, would be to create your own module, and register a provider that is a factory for this functionality. That would allow you to easily inject the functionality into any controller you choose, and configure some common settings across your module or application:

根据您需要如何调用此功能，将决定您开发此功能的方法。最健壮和可移植的方法是创建您自己的模块，并注册作为此功能工厂的提供程序。这将允许您轻松地将功能注入您选择的任何控制器，并在您的模块或应用程序中配置一些常见设置：

myApp.provider('download', function DownloadProvider() {
  var configurableSetting = false;

  this.setConfigurableSetting = function(value) {
    configurableSetting = !!value;
  };

  this.$get = ["customArgument", function addDownload(customArgument) {

    return new Download(customArgument, configurableSetting);
  }];
});

function Download(customArgument, configurableSetting){
  //download code
  return {
     addDownload:function(){
        //code for method
     }
   }
}

Then in your controller:

然后在您的控制器中：

app.controller('whatever',['download',function(download){
      var download1 = download(); //creates a new download instance
      download.addDownload(); //executes method available on function

}])

Using this pattern allows you to configure a provider for your newly created factory, so that you could set your configurableSettingduring the config phase, easily adding common functionality across your module or application without having to explicitly define it in every call.

使用此模式允许您为新创建的工厂配置提供程序，以便您可以configurableSetting在配置阶段设置您的提供程序，轻松添加跨模块或应用程序的通用功能，而无需在每次调用中明确定义它。

For more details on how this works, check out the Angular Developer guide on providers: http://docs.angularjs.org/guide/providers

有关其工作原理的更多详细信息，请查看有关提供程序的 Angular 开发人员指南：http: //docs.angularjs.org/guide/providers