javascript - 检查是否在 Angular 中注入(inject)了依赖项

Question

讨论 here ，IE 在使用 ajax(即 $route 和 $http)时不利于缓存。可以找到解决此问题的绝妙方法 here .

我们在我们的网站上使用许多 Angular 应用程序，因此为了确保缓存问题不会发生在其他使用其他 Angular 应用程序的开发人员身上，我想添加上述建议的解决方案当然，我们网站上的每个 Angular 应用程序。如果我们的风格指南包含以下内容，开发人员将更有可能在构建自己的应用程序时包含它，并成功避免非常危险的 IE 问题。毕竟，我认识的开发人员中不再有多少人积极使用 IE 进行开发。

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $httpProvider.defaults.cache = false;
    if (!$httpProvider.defaults.headers.get) {
      $httpProvider.defaults.headers.get = {};
    }
    // disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
    // routes go here...
}]);

这段代码的作用是强制 IE 不缓存模板并发出 $http 调用的服务器请求，而不是从其缓存中提取结果(如果您的数据是动态的，这可能非常糟糕——它很可能是).

为每个 Angular 应用程序添加上述代码的问题在于，应用程序可能会或可能不会将 ngRoute 注入(inject)到应用程序的依赖项中。如果 ngRoute 不存在，将发生注入(inject)错误。

所以，问题是:是否可以检查 Angular 中是否存在注入(inject)的依赖项？我希望能够执行以下操作:

var myapp = angular.module('ordersApp', [
    'ngTouch',
    'ngRoute',
    'ngAnimate',
    'myController'
]);

if(myapp.has_ngRoute) {
     myapp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $httpProvider.defaults.cache = false;
         if (!$httpProvider.defaults.headers.get) {
             $httpProvider.defaults.headers.get = {};
         }
         // disable IE ajax request caching
        $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
        // routes go here...
    }]);
}

Answer 1

有两种方法可以解决这个问题:

1。检查服务是否存在并基于该服务运行行为

这回答了您的特定问题 - 仅在服务存在时运行代码

您可以使用 $injector.has(...)查看提供商/服务是否已注册。

您可以查看$routeProvider 是否已注册，如果存在则配置 HTTP header 。

这是一个示例，我们在配置 $httpProvider 之前检查 $routeProvider。

// Cache configuration behaviour.
var configureCache = ['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.cache = false;
        if (!$httpProvider.defaults.headers.get) {
            $httpProvider.defaults.headers.get = {};
        }
        // disable IE ajax request caching
        $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}];


angular.module('testApp', [
        // Test this by commenting this out.
        'ngRoute'
    ])
    .config(['$injector', function($injector){
        if ($injector.has('$routeProvider')){
            // If $routeProvider has been registered then
            // configure the $httpProvider.
            console.log('Has $routeProvider: configuring cache.');

            // Use `$injector.invoke(...)` so we can use
            // Angular dependency injection in our
            // configuration function above.
            $injector.invoke(configureCache);
        } else {
            // Otherwise don't do anything.
            console.log('Skipping cache configuration.');
        }
}]);

这是 Plunker 中的示例: http://plnkr.co/edit/orXOjMg0YZXDfwoqf9OD

---

2。将代码拆分为模块

不检查模块/服务是否存在，而是使用模块依赖性来控制它

通过这种方法，我们可以获得更大的灵 active 。您定义缓存行为在它自己的模块中，该模块依赖于 ngRoute。

这样，当您包含缓存自定义行为时，您知道 ngRoute 必须存在，因为它是依赖项之一!

这为您提供了三种控制路由/缓存行为的方法应用程序仅取决于您包含哪些模块:

没有路线

angular.module('testApp', [
        // Don't add 'ngRoute' module dependency here
        // or alter the caching behaviour.
    ])

路由但具有默认缓存行为

angular.module('testApp', [
        'ngRoute'
    ])

具有自定义缓存行为的路由

angular.module('testApp', [
        'noCacheRoutes'
    ])

在每种情况下，我们只需要更改模块依赖项，但以已知方式改变了应用程序的行为。

这里是拆分缓存配置行为的例子进入一个单独的模块:

/**
 * We decide that it only make sense to use this 
 * module along with `ngRoute` so define it as
 * a dependency here.
 */
angular.module('noCacheRoutes', [
        'ngRoute'
    ])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.cache = false;
        if (!$httpProvider.defaults.headers.get) {
            $httpProvider.defaults.headers.get = {};
        }
        // disable IE ajax request caching
        $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
    }]);


/**
 * Don't reference `ngRoute` here, let `noCacheRoutes`
 * bring it in as a transitive dependency.
 * 
 * If later on you decide you don't need to change
 * the caching behaviour you can just replace `noCacheRoutes`
 * with `ngRoute` and don't need to make any further changes.
 */
angular.module('testApp', [
        'noCacheRoutes'
    ])
    .config(['$routeProvider', function($routeProvider) {
        // Configure your application routes here.
    }]);