usta nasıl angularjs uı-router - app genelinde küresel bir devlet

SORU

10 Mayıs 2013, Cuma

usta nasıl angularjs uı-router - app genelinde küresel bir devlet

<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>

Uygulama (açısal-app türetilen): belirli bir yapıya sahip

başlık: site navigasyon, giriş/çıkış geliyor araç vb. Bu dinamik ve ışık vardır
bildirim: bildirim Küresel kap.
kap: işte benim <ng-view> eskiden. Bu diğer tüm modülleri yükler.
altbilgi: Küresel altbilgi.

Nasıl devlet hiyerarşisindeki gibi görünüyor? Tek bir modül (rehber) gösterir, ancak genellikle bir uygulama (root) küresel bir devlet olurdu örnek inceledim ve kök devlet içinde başka bir modül Birleşik Devletleri işlenir.

Ne düşündüğümü app benim modül muhtemelen root devlet var ve her modül kendi devlet olmalı ve bendevralırroot devletten. Haksız mıyım?

ui-state örnekte de, $routeProvider $urlRouterProvider $stateProvider hem tanımlı url kullandılar. Benim $stateProvide da yönlendirme kolları öğrenildi. Eğer yanılıyorsam, hangi sağlayıcı yönlendirme için kullanılır?

EDİT: 27**

Teşekkürler!

CEVAP

15 Mayıs 2013, ÇARŞAMBA

Senin plunker içinde aldığın yaklaşım bulunur. @ben-schwartz çözüm üç kök durumda varsayılanları ayarlamak istiyorum nasıl aslında statik manzarası gösterir. Şey plunker eksik çocuğunuz hala başvuru için top konteyner görünümü gerek Birleşik Devletleri.

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

views: { 'container@': ...} yerine 'root.about' 16 *sadece not

Ayrıca soruyor olabilirsiniz ne modülleri tanımlamak zorunda olup olmadığını o zaman uygulamanızın devlet hiyerarşisinin eklemek devlet-ayarlar kendi. Rotalar için tak-çalıştır bir tür/Devletler her bir modül sağlar.

Bunu başarmak için sıkı bir şekilde ana uygulama için modülleri çift olacak.

Modül:

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

Daha sonra, app:

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);
    })      
}]);

Bu tüm modülleri bu desen uygulaması ile uyumlu olması gerekir anlamına gelir. Ama eğer seçebilirsiniz bu kısıtlama kabul ederseniz modülleri herhangi bir kombinasyonu, ve onların Devletleri vardırsihirli bir şekildeuygulamanıza eklenir. Hatta meraklısı elde etmek istiyorsanız, statesModuleName döngü state.options.url, örneğin, modülün url yapısı önek için değiştirebilirsiniz.

Ayrıca modül ui.compat ne zaman gerekli olduğunu unutmayıngeçmekte$stateProvider 23*. Normalde ui.state kullanmalısınız.

Ayrıca $state.includes('root.contact') header.html ) ayarlamak için unutma

updated plunker

Bunu Paylaş: