이미 부트 스트랩 된 애플리케이션을 다시 열고 종속성 추가
이미 부트 스트랩 된 각도 모듈에 늦은 종속성을 주입하는 방법이 있습니까? 제가 의미하는 바는 다음과 같습니다.
다음과 같이 정의 된 사이트 전체 각도 앱이 있다고 가정합니다.
// 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'])
하지만 이렇게하려면 현재 페이지의 종속성으로 매번 앱을 초기화해야합니다.
I prefer to include the basic app.js in every page and simply introduce the required extensions to each page (reports.js, home.js, etc), without having to revise the bootstrapping logic everytime I add or remove something.
Is there a way to introduce dependencies when the App is already bootstrapped? What is considered the idiomatic way (or ways) to do this? I'm leaning towards the latter solution, but wanted to see if the way I described could also be done. thanks.
I solved it like this:
reference the app again:
var app = angular.module('app');
then push your new requirements to the requirements array:
app.requires.push('newDependency');
Simple... Get an instance of the module using the getter like this: var app = angular.module("App");
Then add to the "requires" collection like this: app.requires[app.requires.length] = "ngResource";
Anyway, this worked for me. GOOD LUCK!
According to this proposal on the Angular JS google group this functionality does not exist as of this moment. Hopefully the core team decides to add this functionality, could use it myself.
If you wish to add multiple dependencies at once, you can pass them in push as follows:
<script>
var app = angular.module('appName');
app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>
I realize that this is an old question, however, no working answer has yet been provided, so I decided to share how I solved it.
The solution requires forking Angular, so you can't use CDN anymore. However the modification is very small, so I am surprised why this feature doesn't exist in Angular.
I followed the link to google groups that was provided in one of the other answers to this question. There I found the following code, which solved the issue:
instanceInjector.loadNewModules = function (mods) {
forEach(loadModules(mods), function(fn) { instanceInjector.invoke(fn || noop); });
};
When I added this code to line 4414 in the angular 1.5.0 source code (inside the createInjector function, before the return instanceInjector; statement), it enabled me to add dependencies after bootstrapping like this $injector.loadNewModules(['ngCookies']);.
Since version 1.6.7 it is now possible to lazy load modules after the app has been bootstrapped using $injector.loadNewModules([modules]). Below is an example taken from AngularJS documentation:
app.factory('loadModule', function($injector) {
return function loadModule(moduleName, bundleUrl) {
return getScript(bundleUrl).then(function() { $injector.loadNewModules([moduleName]); });
};
})
Please read full documentation about loadNewModules as there are some gotchas around it.
There's also a very good sample app by omkadiri using it with ui-router.
'Programing' 카테고리의 다른 글
| 문서 스타일과 RPC 스타일 통신의 차이점은 무엇입니까? (0) | 2020.09.07 |
|---|---|
| jQuery-기본값 방지 후 기본값 계속 (0) | 2020.09.07 |
| 단일 SELECT 문에 여러 공통 테이블 식을 어떻게 가질 수 있습니까? (0) | 2020.09.07 |
| 열기 / 닫기 태그 및 성능? (0) | 2020.09.07 |
| JavaScript-문자열 정규식 역 참조 (0) | 2020.09.07 |