J'ai un cas d'utilisation nécessitant le chargement d'applications angulaires distinctes.
Basé sur plusieurs questions de dépassement de pile et Ce fil Google , c'est faisable. Cependant, je ne peux pas le faire fonctionner.
regarder la documentation:
http://docs.angularjs.org/api/angular.bootstrap
On dirait que vous devez fournir l'élément (quelle est la bonne façon d'obtenir une poignée sur l'élément?), puis sur la manière de le remettre à la configuration, les contrôleurs, etc. et comment cela fonctionnerait-il avec des itinéraires? C'est-à-dire comment la collision fonctionne-t-elle, c'est-à-dire l'application A et l'application B / FOO à /fooa.html et /foOB.html et /foOB.html respectivement ... ou chaque application décrit sa propre. Ouverre?
Merci!
4 Réponses :
Eh bien, vous avez 2 choix ici:
Si vous les créez comme angular.module () il n'y aurait pas de moyen ATM pour connecter les modules les uns avec les autres.
Si vous créez directives avec un templateurl à lazyload vos composants Vous pouvez diffuser des attributs partagés et les écouter
La réponse va être plus proche de cette Stackoverflow.com/Questtions/12860595/... .
le figuré. Voici comment charger avec succès deux applications angulaires en parallèle. Voir également que je nommé les contrôleurs de la même manière pour chaque application de montrer que les dépendances ne seront pas entrées en collision (car elles sont scopées dans chaque application respective via un module):
<!doctype html>
<html lang="en">
<body>
<script src="lib/angular/angular.js"></script>
<!-- define foo -->
<div id="fooApp">
<ul class="menu">
<li><a href="#/foo1">foo1</a></li>
<li><a href="#/foo2">foo2</a></li>
</ul>
<div ng-view>
</div>
</div>
<script>
// Declare app level module which depends on filters, and services
var app = angular.module('fooApp', ['fooApp.controllers']);
// Configure the app
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo1', {template: '<h1>Foo</h1><h2>foo1</h2>', controller: 'MyCtrl1'});
$routeProvider.when('/foo2', {template: '<h1>Foo</h1><h2>foo2</h2>', controller: 'MyCtrl2'});
}]);
angular.module('fooApp.controllers', []).
controller('MyCtrl1', [function () {
console.log("fooApp.MyCtrl1 invoked.");
}])
.controller('MyCtrl2', [function () {
console.log("fooApp.MyCtrl2 invoked.");
}]);
// manually bootstrap
var div = document.getElementById('fooApp');
console.log(div);
angular.bootstrap(div, ['fooApp']);
</script>
<!-- define bar -->
<div id="barApp">
<ul class="menu">
<li><a href="#/bar1">bar1</a></li>
<li><a href="#/bar2">bar2</a></li>
</ul>
<div ng-view>
</div>
</div>
<script>
// Declare app level module which depends on filters, and services
var app = angular.module('barApp', ['barApp.controllers']);
// Configure the app
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/bar1', {template: '<h1>Bar</h1><h2>bar1</h2>', controller: 'MyCtrl1'});
$routeProvider.when('/bar2', {template: '<h1>Bar</h1><h2>bar2</h2>', controller: 'MyCtrl2'});
}]);
angular.module('barApp.controllers', []).
controller('MyCtrl1', [function () {
console.log("barApp.MyCtrl1 invoked.");
}])
.controller('MyCtrl2', [function () {
console.log("barApp.MyCtrl2 invoked.");
}]);
// manually bootstrap
var div = document.getElementById('barApp');
console.log(div);
angular.bootstrap(div, ['barApp']);
</script>
</body>
</html>
Tu m'as battu! Soyez prudent avec le routage de Tho. .ORE () ferait mal vrai. En outre, vous voudrez peut-être utiliser prêt à bootstrap: angulaire.Element (document) .Readady (fonction (fonction () {angulaire.bootstrap (document, ['app1']);});});});});
Merci. La réponse ci-dessus n'est que la première étape. Maintenant, je dois répondre "Comment gérer / prévenir les collisions dans RouteProvider".
Fondamentalement - vous ne le faites pas. Je pense que vous êtes un peu coincé ici, le routeur anguleux de l'UI pourrait aider avec les États etc. mais vraiment, la seule chose à laquelle je peux penser est de mettre une application sur HTML5Mode et l'autre avec HTML5MODE.
Une autre solution consiste à créer une exigence exclusive que les itinéraires sont exprimés externes à configuration en tant que JSON. L'application d'agrégation, avant la biottrage manuelle, peut examiner tous les JSON et l'échec rapide sur la collision. Et par convention, les «sous-applications subordonnées» pourraient appeler une méthode utilitaire au sein de la configuration qui itère sur leurs itinéraires JSON et définit des itinéraires de manière appropriée. Ce n'est pas beaucoup d'effort de recours, et une convention assez simple à suivre.
À ce stade, je suis prêt à attribuer la prime à quiconque qui a une meilleure solution que ce qui est décrit dans les commentaires ci-dessus (puisque S / O ne vous permet pas de vous accorder la prime de la manifestation que vous avez répondu à votre propre question).
Je n'ai rien de plus à ajouter que j'ai peur :-).
Ainsi, compte tenu de l'exigence que cela soit un contenu entraîné par le service, la seule façon de voir pour le faire est une sorte de mélange entre des pratiques HTML angulaires et standard. Effectivement, vous voudrez effectuer une page à partir du livre de plumker et utiliser des iframes pour contenir chaque portlet individuel. puis sur chacun de ces portlets, vous voudrez avoir une application complètement distincte (y compris le chargement des ressources). P> <!doctype html>
<html lang="en">
<body ng-app="fooApp">
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
var app = angular.module('fooApp', ['fooApp.controllers']);
// Configure the app
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo1', {template: '<h1>Foo</h1><h2>foo1</h2>', controller: 'MyCtrl1'});
$routeProvider.when('/foo2', {template: '<h1>Foo</h1><h2>foo2</h2>', controller: 'MyCtrl2'});
}]);
angular.module('fooApp.controllers', []).
controller('MyCtrl1', [function () {
console.log("fooApp.MyCtrl1 invoked.");
}])
.controller('MyCtrl2', [function () {
console.log("fooApp.MyCtrl2 invoked.");
}]);
</script>
</body>
</html>
Merci! Je pense que c'est la meilleure réponse à mon cas d'utilisation.
OK Alors j'ai compris comment procéder à cela à l'aide du routeur d'interface utilisateur angulaire La clé est descendue à la capacité du routeur d'UI angulaire aux états de transition sans effectuer l'URL.
Les étapes pour obtenir ce travail
Ce qui suit est le code pour obtenir ce travail: plumeur de travail de cette solution à http://plnkr.co/edit/bxsn8qsmdiozjlys2zyk?p=preview Voir ma réponse précédente pour une discussion actuellement se produisant pour rendre le support de portlet plus intrinsèque dans le routeur UI.
C'est très intéressant. Vous utilisez donc l'état pour changer de modèle / contrôleur et l'état est défini sur l'application. Problème résolu. Mais attendez! Comment marquez-vous! =)
Que signifie un signet dans ce cas? Vous avez toujours le contrôle de l'URL à travers $ Emplacement mais je ne suis pas sûr de comprendre votre intention.
L'utilisation de l'utilisation est la suivante: application de la barre de charge d'application. Dans la barre, vous pouvez être à l'état A, B ou C. L'utilisateur est à la barre d'état + C, et souhaite créer un signet dans le navigateur. À l'aide de l'état, les URL pour la barre + A, la barrière + B et la barre + c sont identiques.
Donc, vous parlez d'une architecture de portlet qui met à jour l'URL avec les pièces de composants qui ne sont actuellement pas appuyées de manière native par le routeur angulaire ou UI, mais sont en cours de discussion sur GITUB.COM/ANGULT-UI/UI-ROUDER/issues/160 .
Sont-ils vraiment deux applications distinctes ou sont-ils différents chemins de routage / vues différentes dans une application. Je demande parce que c'est beaucoup parlé de sujet et a conduit à la création d'un grand routeur alternatif Github. com / angulaire-ui / ui-routeur qui gère les flux de liaison complexes et de contrôle. Ainsi que la vue parallèle définit dans ces chemins de route.
Je serais heureux de vous promener sur la manière d'utiliser cela pour le cas que vous présentez dans votre réponse ci-dessous. Sauf si vos exigences sont totalement sur le chargement des applications individuelles.
Ceci est littéralement plusieurs applications. Imaginez un environnement SOA où des services sont déployés sur des hôtes variables, chacun avec une application UI angulaire relativement simple (pour la configuration de ce service particulier). Et une application centralisatrice (Pensez admin portablement / console système) qui connaît environ chacune d'elles et peuvent creuser (exécuter) son application sans redirection. Fait de cette façon, un service peut être géré directement et également géré via une interface maître.
Ces services peuvent-ils vivre sur différents sous-espions? C'est peut-être vu sans les autres mais avoir toutes les exigences énumérées? J'envisage d'une application d'administration qui vous permet de percer les sous-espaces de sous-services tout en maintenant un parent d'administrateur courant. Je ne vois tout simplement pas un moyen de faire cela avec une perspective de portail jusqu'à GitHUB. com / angulaire-ui / ui-routeur / numéros / 84 est corrigé. J'ai lancé une partie de ce correctif à Github.com/angular-ui/ Ui-routeur / pull / 115 .