codememo

다시 열고 이미 부트스트랩된 응용 프로그램에 종속성을 추가합니다.

tipmemo 2023. 2. 8. 17:54
반응형

다시 열고 이미 부트스트랩된 응용 프로그램에 종속성을 추가합니다.

이미 부트스트랩된 각도모듈에 레이트 의존성을 주입하는 방법이 있습니까?제 말은 이렇습니다.

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

// 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(등)을 사용하여 추가 또는 삭제할 때마다 부트스트래핑 로직을 변경할 필요가 없습니다.

앱이 이미 부트스트랩되어 있을 때 종속성을 도입할 수 있는 방법이 있습니까?이것을 하기 위한 관용적인 방법(또는 여러 방법)은 무엇입니까?저는 후자의 해결책에 기울어져 있지만, 제가 설명한 방식도 가능한지 알고 싶었습니다.감사해요.

이렇게 해결했습니다.

앱을 다시 참조합니다.

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

다음으로 새로운 요건을 요건 어레이에 적용합니다.

app.requires.push('newDependency');

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

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

어쨌든, 이건 나한테 효과가 있었어.행운을 빕니다.

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

한 번에 여러 개의 종속성을 추가할 경우 다음과 같이 푸시 방식으로 종속성을 전달할 수 있습니다.

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

오래된 질문이라는 것을 알고 있습니다만, 아직 유효한 회답이 없기 때문에, 그 해결 방법을 공유하기로 했습니다.

솔루션에서는 Angular를 포킹해야 하므로 CDN을 더 이상 사용할 수 없습니다.그러나 수정이 매우 적기 때문에 Angular에는 이 기능이 없는 것이 놀랍습니다.

저는 이 질문에 대한 다른 답변하나제공된 구글 그룹 링크를 팔로우했습니다.거기서, 다음의 코드를 발견해, 문제를 해결했습니다.

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

를 각도 1.5코드 때(「」1.5.0 「」4414 「」( 「내부」)createInjector 「」전return instanceInjector;스테이트먼트할 수 .$injector.loadNewModules(['ngCookies']);.

1.6이 1.6.7로 후 할 수 .$injector.loadNewModules([modules])의 Angular를 예로 들 수 있습니다.JS:

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

loadNewModules에 대한 자세한 내용은 loadNewModules에 대한 자세한 내용을 참조하십시오.

usi-router와 함께 사용하는 omkadiri의 매우 좋은 샘플 앱도 있습니다.

언급URL : https://stackoverflow.com/questions/18875714/re-open-and-add-dependencies-to-an-already-bootstrapped-application

반응형