你可以注入依赖到现有的角应用程序？

可以说我有一个应用程序，我不知道它是参考名称还是它的定义。你可以注入依赖到现有的角应用程序？

比方说，我有另一个我创建的模块，（导航模块）我想在现有的角度应用程序中注入此导航模块，以便它可以正常工作。

<html ng-app="appA"> 
    <body> 
    <!-- navController exists inside another app --> 
    <nav id="testElement" controller="navController"></nav> 
    </body> 
</html>

实施例：

$(document).ready(function() { 
    var nav = document.getElementById('testElement'); 
    if (!angular.element(nav).length) return; 
    var appElement = angular.element('[ng-app]'); 
    console.log('appname', appElement.attr('ng-app')); 
    var appToInject; 
    if (!appElement.length) { 
     // Manually run the new app from within js without a ng-app attrib 
     appToInject = angular.module('CustomModuleForNavigation', []); 
     angular.bootstrap(nav, ['CustomModuleForNavigation']); 
    } else { 
     appToInject = angular.module(appElement.attr('ng-app'),  []); 
    } 
    if (angular.isUndefined(appToInject)) return; 
    console.log('winning?', appToInject) 

    appToInject.controller('navController', function($scope) { 
     console.log('extending app in new ctrl!', $scope); 
    }); 

});

来源

2015-10-06 Shannon Hochkins

你的意思是在你通过简单添加一个脚本标签把一个小部件放在别人的网站上吗？不是100％清楚这里的目标是什么 – charlietfl

在某种意义上来说，是的，我需要通过向页面添加脚本来扩展现有的应用程序，我已经添加了一个示例。 –

答案是肯定的。而且你没有提供足够的信息，因为答案在很大程度上取决于事实，如果它是你自己的应用程序，或者你正在窃取其他人的应用程序。无论如何，这是可怕的设计解决方案，除非它是绝对必要的（第三方浏览器插件或特定网站）。 – estus

我已经通过注入依赖性到现有的应用程序，或手动运行自己了角自举了这一点。

var appElement = $('[ng-app]').first(); 
function angularJsModuleMerger(elementToBindScope, dependencies) { 
    var scopeElement = document.getElementById(elementToBindScope); 
    // Dependencies should contain our mobile scopeElement app only, the mobile app should contain it's dependencies. 
    if (!angular.element(scopeElement).length) return; 
    // If There is an existing angular app, inject our app into it, else, create a new app with our dependencies. 
    var hasAngularApp = appElement.length; 
    var appToInject; 
    if (!hasAngularApp) { 
     appToInject = angular.module('appForModularInjection', dependencies); 
     // Manually run this app, so that we're not interrupting the current app. 
    } else { 
     // There is an existing app, so let's get it by it's name 
     appToInject = angular.module(appElement.attr('ng-app')); 
     // Inject our dependencies to the existing app, IF they don't alreay have these dependencies. 
     // Dependencies must also be loaded previously. 
     var currentDependencies = appToInject.requires; 
     var newDependencies = currentDependencies.concat(dependencies); 
     appToInject.requires = newDependencies; 
     appToInject.run(function($rootScope, $compile) { 
      $compile(angular.element(scopeElement).contents())($rootScope); 
     }); 
    } 
    // If we still don't have an app, well, voodoo. 
    if (angular.isUndefined(appToInject)) return; 
    // console.log('ok'); 
    // We must run the app after all the declarations above for both existing and non existing apps. 
    if (!hasAngularApp) angular.bootstrap(scopeElement, ['appForModularInjection']); 
}

这会将其自动注入到现有的应用程序中，手动定义应用程序并将其正确地绑定到相关元素。

范围/层级是无关紧要的。

来源

2015-10-07 01:21:38

是的，它通常按照您在此处显示的方式完成。对于您不知道的模块名称的应用程序（例如，使用angular.bootstrap引导），您可以挂接到angular.module（'ng'）。requires。 – estus

如果存在应用程序模块定义，但想要为应用程序模块添加其他依赖项，可以通过这种方式完成。

var existingModule = angular.module('appModuleName'); 
existingModule.requires.push('additionaldependency');

appModuleName可以通过索引的ng-app属性找到。确保此脚本正好在现有模块定义脚本之后运行。另外，在加载此脚本之前，需要加载'additionaldependency'所需的脚本。

来源

2016-08-18 08:45:35 Balaji

你可以注入依赖到现有的角应用程序？

回答

相关问题