angularjs UI-router - jak zbudować stan główny, który jest globalny w całej aplikacji

Question

angularjs UI-router - jak zbudować stan główny, który jest globalny w całej aplikacji

<html ng-app="app">
<head>
...
</head>
<body>
  <div id="header"></div>
  <div id="notification"></div>
  <div id="container"></div>
  <div id="footer"></div>
</body>
</html>

Z podaną strukturą aplikacji (pochodzącą z angular-app):

nagłówek: tutaj pojawia się nawigacja witryny, pasek narzędzi logowania/wyjścia itp. Jest dynamiczny i posiada własny kontroler
notification: Globalny kontener powiadomień.
container: This used to Be my <ng-view>. Więc tutaj ładują się wszystkie inne moduły.
footer: globalna stopka.

Jak wygląda hierarchia stanowa? Przeszedłem przez przykład, który pokazuje pojedynczy moduł (kontakty), ale zazwyczaj aplikacja miałaby stan globalny (root), a wewnątrz stanu głównego renderowane są inne stany modułu.

Myślę, że mój app moduł prawdopodobnie ma stan root i wtedy każdy moduł powinien mieć swój własny stan, a ja muszę dziedziczyć ze stanu root. Mam rację?

Również z przykładu ui-state, użyli zarówno $routeProvider i $urlRouterProvider, jak i $stateProvider ma zdefiniowany adres url. My understand was $stateProvide również obsługuje / align = "left" / Jeśli się mylę, jakiego dostawcy powinienem użyć do routingu?

Edytuj: http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview

Dzięki!

58

angularjs angular-ui

Author: Amitava, 2013-05-10

Source

3 answers

Chociaż mylące, FAQ w ui-Router wiki wydaje się mówić, że nie jest to możliwe: ui-Router/wiki / faq

Jedną z metod jest umożliwienie każdej funkcji zdefiniowania własnego stanu Roota (jak w tym przykładzie: AngularJS State Management with UI-router)

Innym byłoby zdefiniowanie całej hierarchii stanu w module "myApp" i po prostu wykorzystanie kontrolerów itp. z modułów zależnych. Działa to szczególnie dobrze, gdy utrzymujesz telefon komórkowy i desktop site; definiowanie hierarchii stanu każdej witryny w module mobileApp i desktopApp oraz posiada funkcjonalność (np. Kontrolery, usługi itp.) współdzielone w osobne Moduły.

5

Author: ben schwartz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-12 16:21:43

To zależy jak wolisz do tego podejść.

Wszystkie zakresy dziedziczą z rootScope , więc możesz umieścić tam stan globalny. Literatura NG wyraźnie wspomina, że należy umieścić tam tylko stan globalny, a nie funkcjonalność. Funkcjonalność wymagana w całym systemie należy do usług, a w szczególności nie należy wdrażać usług, których jedynym celem jest zachowanie stanu. Wszystkie porady wydają się być niejawnie udostępniane w kontekście tego, jak to albo ułatwia lub utrudnia łatwe wykonywanie testów end to end.

0

Author: grettke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-11 12:56:32

score 53 · Accepted Answer

Podejście, które przyjąłeś w swoim plunkerze, jest bliskie. @ ben-rozwiązanie pokazuje, jak Ustawiłeś domyślne ustawienia w stanie roota dla trzech zasadniczo statycznych widoków. Rzeczą, której brakuje w Twoim plunkerze, jest to, że Twoje dziecko nadal musi odwoływać się do widoku górnego kontenera.

   .state('root',{
      url: '',
      views: {
        'header': {
          templateUrl: 'header.html',
          controller: 'HeaderCtrl'
        },
        'footer':{
          templateUrl: 'footer.html'
        }
      }
    })
    .state('root.about', {
      url: '/about',
      views: {
        'container@': {
          templateUrl: 'about.html'
        }
      }
    });

Uwaga views: { 'container@': ...} zamiast tylko templateUrl: ... w 'root.about'

Możesz również pytać o to, czy moduły mogą definiować własne zestawy stanów, które następnie dołączasz do stanu aplikacji hierarchia. Rodzaj plug-and-play dla tras / stanów, które zapewnia każdy moduł.

Aby to osiągnąć, musisz ściśle powiązać swoje moduły z główną aplikacją.

W module:

angular.module('contact', ['ui.router'])
  .constant('statesContact', [
      { name: 'root.contact',
        options: {
          url: 'contact',
          views: {
            'container@': {
              templateUrl: 'contacts.html'
            }
          },
          controller:'ContactController'
      }}
    ])
  .config(['$stateProvider', function($stateProvider){    
  }])

Następnie w aplikacji:

var app = angular.module('plunker', ['ui.router', 'contact']);
app.config(       ['$stateProvider', 'statesContact', 
           function($stateProvider,   statesContact){
    $stateProvider
    .state('root',{ ... })
    .state('root.home', { ... })
    .state('root.about', { ... })
    angular.forEach(statesContact, function(state) {
      $stateProvider.state(state.name, state.options);
    })      
}]);

Oznacza to, że wszystkie moduły muszą być zgodne z tym wzorem określonym w aplikacji. Ale jeśli zaakceptujesz to ograniczenie, możesz wybrać Dołącz dowolną kombinację swoich modułów, a ich Stany magicznie zostaną dodane do twojego app. Jeśli chcesz być jeszcze bardziej fantazyjny, możesz zmodyfikować state.options.url w swojej pętli statesModuleName, aby na przykład przedrostek struktury adresu URL modułu.

Zauważ również, że moduł ui.compat jest niezbędny tylko wtedy, gdy przechodzisz Z $routeProvider do $stateProvider. Zamiast tego powinieneś normalnie używać ui.state.

Również nie zapomnij dostosować w nagłówku.html $state.includes('root.contact'))

Updated plunker