Ok więc ja zorientowali się, jak to zrobić za pomocą kątowego UI-routera kluczem sprowadza się do zdolności kątowego UI-router przejściowym stany bez wpływu URL .
Kroki, aby dostać tę pracę
- Pierwszą instancję każda aplikacja jako samodzielna aplikacja z wykorzystaniem ręczną bootstrap do Zidentyfikowaliśmy elementu.
- Dołącz do każdego aplikatora routery $ stanProvider do sterowania wewnętrznymi przejściami stanu (trasami).
- Należy tutaj pozostawić klucz url dla każdego zdefiniowanego stanu lub zresetować stronę, zmieniając adres URL przy każdym przejściu stanu.
- Skonfiguruj funkcję stanu w sterowniku głównym, aby sterować zmianami stanu.
Poniżej znajduje się kod, aby uzyskać tej pracy:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="angular-ui-states.min.js"></script>
<script src="app.js"></script>
</head>
<!-- define foo -->
<div id="fooApp" ng-controller="MainCtrl">
<ul class="menu">
<li><a href="#" ng-click="state('foo1')">foo1</a></li>
<li><a href="#" ng-click="state('foo2')">foo2</a></li>
</ul>
<div ui-view>
</div>
</div>
<script>
// Declare app level module which depends on filters, and services
var app = angular.module('fooApp', ['fooApp.controllers', 'ui.state']);
// Configure the app
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('foo1',
{
template: '<h1>Foo</h1><h2>foo1</h2>',
controller: 'MyCtrl1'
})
.state('foo2',
{
template: '<h1>Foo</h1><h2>foo2</h2>',
controller: 'MyCtrl2'
});
}]);
angular.module('fooApp.controllers', [])
.controller('MainCtrl', ['$scope', '$state', function($scope, $state){
$scope.state = function(name){
console.log('Transition to state ' + name);
$state.transitionTo(name);
}
}])
.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" ng-controller="MainCtrl">
<ul class="menu">
<li><a href="#" ng-click="state('bar1')">bar1</a></li>
<li><a href="#" ng-click="state('bar2')">bar2</a></li>
</ul>
<div ui-view>
</div>
</div>
<script>
// Declare app level module which depends on filters, and services
var app = angular.module('barApp', ['barApp.controllers', 'ui.state']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('bar1',
{
template: '<h1>Bar</h1><h2>bar1</h2>',
controller: 'MyCtrl1'
})
.state('bar2',
{
template: '<h1>Bar</h1><h2>bar2</h2>',
controller: 'MyCtrl2'
});
}]);
angular.module('barApp.controllers', [])
.controller('MainCtrl', ['$scope', '$state', function($scope, $state){
$scope.state = function(name){
console.log('Transition to state ' + name);
$state.transitionTo(name);
}
}])
.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>
plunker tego roztworu roboczego w http://plnkr.co/edit/bXSN8qSMdioZJLYs2zyk?p=preview
Proszę zobaczyć mój poprzedni odpowiedź do dyskusji aktualnie występujących aby wsparcie portlet bardziej nieodłącznym w ui-routerze.
Czy to naprawdę dwie różne aplikacje, czy są to różne ścieżki routingu/różne widoki w ramach jednej aplikacji. Pytam, ponieważ dużo mówi się o temacie i doprowadziło to do stworzenia świetnego alternatywnego routera https://github.com/angular-ui/ui-router, który obsługuje złożone trasy i przepływy kontroli. Podobnie jak widok równoległy ustawia te ścieżki tras. –
Z chęcią przeprowadzę Cię przez procedurę korzystania z tego w przypadku, który przedstawisz w poniższej odpowiedzi. O ile Twoje wymagania nie dotyczą w pełni ładowania poszczególnych aplikacji. –
To dosłownie wiele aplikacji. Wyobraźmy sobie środowisko SOA, w którym usługi są wdrażane na różnych hostach, z których każdy ma stosunkowo prostą aplikację kątową UI (do konfiguracji tej konkretnej usługi). I aplikacja centralizująca (think admin portal/system console), która wie o każdym z nich i może przekopać się (uruchomić) swoją aplikację bez przekierowania. Zrobione w ten sposób, usługa może być zarządzana bezpośrednio, a także zarządzana za pośrednictwem interfejsu głównego. –