다시 열고 이미 부트 스트랩 된 애플리케이션에 종속성 추가

Question 1

이미 부트 스트랩 된 각도 모듈에 늦은 종속성을 주입하는 방법이 있습니까? 제가 의미하는 바는 다음과 같습니다.

다음과 같이 정의 된 사이트 전체 각도 앱이 있다고 가정합니다.

// in app.js
var App = angular.module("App", []);

그리고 모든 페이지에서 :

<html ng-app="App">

나중에 현재 페이지의 요구 사항에 따라 논리를 추가하기 위해 앱을 다시 엽니 다.

// in reports.js
var App = angular.module("App")
App.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

이제 (같은 논리의 그 주문형 비트의 하나는 자신의 의존성을 필요로 말을 ngTouch, ngAnimate, ngResource, 등). 기본 앱에 어떻게 연결할 수 있습니까? 이것은 작동하지 않는 것 같습니다.

// in reports.js
var App = angular.module("App", ['ui.event', 'ngResource']); // <-- raise error when App was already bootstrapped

나는 내가 모든 것을 미리 할 수 있다는 것을 알고있다.

// in app.js
var App = angular.module("App", ['ui.event', 'ngResource', 'ngAnimate', ...]);

또는 모든 모듈을 자체적으로 정의한 다음 모든 것을 기본 앱에 삽입합니다 ( 자세한 내용은 여기 참조 ).

// in reports.js
angular.module("Reports", ['ui.event', 'ngResource'])
.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

// in home.js
angular.module("Home", ['ngAnimate'])
.controller("HomeController", ['$scope', '$http', function($scope, $http){
  // ...
}])

// in app.js, loaded last into the page (different for every page that varies in dependencies)
var App = angular.module("App", ['Reports', 'Home'])

하지만 이렇게하려면 현재 페이지의 종속성으로 매번 앱을 초기화해야합니다.

나는 기본을 포함하는 것을 선호 app.js모든 페이지를 간단하게 각 페이지 (에 필요한 확장을 도입 reports.js, home.js는 I 추가 부트 스트랩 로직마다 또는 제거 뭔가를 수정하지 않고, 등).

앱이 이미 부트 스트랩되었을 때 종속성을 도입하는 방법이 있습니까? 이를 수행하는 관용적 방법 (또는 방법)은 무엇입니까? 나는 후자의 해결책에 기대고 있지만 내가 설명한 방식이 또한 수행 될 수 있는지보고 싶었다. 감사.

Question 2

다음과 같이 해결했습니다.

앱을 다시 참조하십시오.

var app = angular.module('app');

그런 다음 새 요구 사항을 요구 사항 배열로 푸시합니다.

app.requires.push('newDependency');

Question 3

단순 ... 다음과 같은 getter를 사용하여 모듈의 인스턴스를 가져옵니다. var app = angular.module ( "App");

그런 다음 다음과 같이 "requires"컬렉션에 추가합니다. app.requires [app.requires.length] = "ngResource";

어쨌든 이것은 나를 위해 일했습니다. 행운을 빕니다!

Question 4

Angular JS Google 그룹의이 제안에 따르면 이 기능은 현재 존재하지 않습니다. 핵심 팀이이 기능을 추가하기로 결정하고 직접 사용할 수 있기를 바랍니다.

Question 5

한 번에 여러 종속성을 추가하려는 경우 다음과 같이 푸시로 전달할 수 있습니다.

<script>
    var app = angular.module('appName');
    app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>

Question 6

나는 이것이 오래된 질문이라는 것을 알고 있지만 아직 유효한 답변이 제공되지 않았기 때문에 어떻게 해결했는지 공유하기로 결정했습니다.

이 솔루션에는 Angular 분기가 필요하므로 더 이상 CDN을 사용할 수 없습니다. 그러나 수정이 매우 적기 때문에 Angular 에이 기능이 존재하지 않는 이유에 놀랐습니다.

이 질문에 대한 다른 답변 중 하나에 제공된 Google 그룹 링크를 따라갔습니다 . 문제를 해결 한 다음 코드를 찾았습니다.

instanceInjector.loadNewModules = function (mods) {
  forEach(loadModules(mods), function(fn) { instanceInjector.invoke(fn || noop); });
};

이 코드를 각도 1.5.0 소스 코드의 4414 행에 추가했을 때 ( createInjector함수 내부 , return instanceInjector;명령문 앞 ) 이와 같이 부트 스트랩 후 종속성을 추가 할 수있었습니다 $injector.loadNewModules(['ngCookies']);.

Question 7

버전 1.6.7부터 이제 .NET을 사용하여 앱을 부트 스트랩 한 후 모듈을 지연로드 할 수 있습니다 $injector.loadNewModules([modules]). 다음은 AngularJS 문서에서 가져온 예입니다.

app.factory('loadModule', function($injector) {
   return function loadModule(moduleName, bundleUrl) {
     return getScript(bundleUrl).then(function() { $injector.loadNewModules([moduleName]); });
   };
})

주위에 몇 가지 문제가 있으므로 loadNewModules에 대한 전체 문서를 읽으 십시오.

ui-router와 함께 사용하는 omkadiri 의 아주 좋은 샘플 앱 도 있습니다 .