你可以注入依賴到現有的角應用程序？

可以說我有一個應用程序，我不知道它是參考名稱還是它的定義。你可以注入依賴到現有的角應用程序？

比方說，我有另一個我創建的模塊，（導航模塊）我想在現有的角度應用程序中注入此導航模塊，以便它可以正常工作。

<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

你可以注入依賴到現有的角應用程序？

回答

相關問題