AngularJS 和分析——分离关注点答案

【问题标题】：AngularJS and analytics - separating concernsAngularJS 和分析——分离关注点
【发布时间】：2014-09-08 16:16:31
【问题描述】：

考虑以下情况：Web 应用程序的每个页面上有多个（手动引导的）AngularJS 应用程序。需要将 Web 分析跟踪（在本例中为 Adobe Omniture/SiteCatalyst）添加到每个应用程序中。但是，我希望将分析代码与 AngularJS 应用程序的其余部分完全分开 - 能够立即将其删除。

解决此问题的最佳方法是什么？我考虑了以下几点：

编写 JQuery 代码来询问 DOM 并提交 SiteCatalyst 调用（可以，但不是很 AngularJS-ey）
找到一些方法来扩展 AngularJS 控制器并使用额外的分析代码包装方法。这可能还涉及为范围变量添加 $watch 代码。
其他一些拦截 AngularJS 事件的方法，类似于 HTTP 拦截器。

【问题讨论】：

标签： angularjs separation-of-concerns web-analytics adobe-analytics

【解决方案1】：

这就是我会做的：

1) 在应用程序的根目录定义一个名为“AnalyticsCatcherController”（或类似名称）的控制器，该控制器将负责捕获您要跟踪的所有事件，如下所示：

  .controller('AnalyticsCatcherController', ['$scope', function($scope) {
    $scope.$on('HitMainLink', function() {
      ...
    });
    $scope.$on('FbSharedClick', function() {
      ...
    });
  }]);

2) 然后你只需 $emit your custom events 从你的指令的操作中，像这样：$emit('FbSharedClick')。

这样，如果您想删除分析，您只需要摆脱“AnalyticsCatcherController”。如果您想使用另一个跟踪系统：所有逻辑都在“AnalyticsCatcherController”中，与您的应用程序的逻辑完全分离。确实，即使您移除控制器，这些事件仍然会发出，那又如何呢？它们不会对性能产生任何实际影响，此外：您可以将这些事件用于其他目的，因此您不必将它们视为您的 Analytics 跟踪系统的一部分。

【讨论】：

这似乎是一种优雅的做法。但是，您仍然需要预先知道要在自定义事件中作为参数传递哪些数据项，因为您无法从父范围访问子范围变量。因此，如果分析调用需要额外的数据项（已存在于您的子范围中），则您必须同时修改应用程序的指令/控制器和分析控制器。