ui-yönlendirici angularjs - (açısal içi türetilmiş) uygulamanın belirli bir yapı ile uygulama

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

boyunca küresel ana durumunu oluşturmak için nasıl: Burada yer kullan, giriş:ui-yönlendirici angularjs - (açısal içi türetilmiş) uygulamanın belirli bir yapı ile uygulama

başlık/out araç çubuğu vb. geliyor. Bu dinamik ve kendi Denetleyiciye sahip
bildirimi: Global bildirim kabı.
container: Bu benim <ng-view> kullanmıştı. Yani diğer tüm modüllerin yüklendiği yerdir.
altbilgi: Global altbilgi.

Durum hiyerarşisi nasıl görünüyor? Tek bir modül (rehber) gösteren örneği inceledim, ancak tipik olarak bir uygulama global (kök) duruma sahip olacak ve diğer modül durumları oluşturuldu.

Ne Düşünüyorum benim app modülüdür muhtemelen root devlet ve daha sonra her modül kendi devlet var olmalıdır ve ben inherit-root durumundan var. Ben haklı mıyım Ayrıca, ui-state numaralı örnekten de,ve $urlRouterProvider'un yanı sıra $stateProvider URL'sinin de tanımlanmış olması gerekir. Anladığım kadarıyla, $stateProvide, yönlendirme işlemlerini de gerçekleştirdi. Yanılıyorsam, yönlendirme için hangi sağlayıcıyı kullanmalıyım?

DÜZENLEME: http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview

teşekkürler!

kaynak

2013-05-10 SamSerious

Plunker'ınızda aldığınız yaklaşım yakındır. @ ben-schwartz çözümü, temel olarak üç temel statik görünüm için kök durumunuzdaki varsayılanları nasıl ayarladığınızı gösterir. Püskül makinenizde eksik olan şey, çocuğunuzun hala en iyi konteyner görünümünü referans göstermesi gerektiğidir.Ne de soran olabilir Eğer modülleri sonra uygulamanın devlet hiyerarşisi eklemek kendi devlet setleri, tanımlamak olabilir olup olmadığıdır

.state('root',{ 
     url: '', 
     views: { 
     'header': { 
      templateUrl: 'header.html', 
      controller: 'HeaderCtrl' 
     }, 
     'footer':{ 
      templateUrl: 'footer.html' 
     } 
     } 
    }) 
    .state('root.about', { 
     url: '/about', 
     views: { 
     '[email protected]': { 
      templateUrl: 'about.html' 
     } 
     } 
    });

Not views: { '[email protected]': ...} yerine templateUrl: ... ait 'root.about'

içinde. Her modülün sağladığı yollar/durumlar için bir çeşit tak-çalıştır.

Bunu başarmak için modüllerinizi ana uygulamanıza sıkıca takacaksınız. modülde

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

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üller uygulamanızda belirtilen bu deseni ile uyumlu olması gerektiği anlamına gelir. Ancak, bu kısıtlamayı kabul ederseniz, modüllerin herhangi bir bileşimini dahil etmeyi seçebilir ve durumunuza sihirli bir şekilde uygulamanıza ekleyebilirsiniz. Daha da meraklı olmak istiyorsanız, state.options.url'u statesModuleName döngüsünde, örneğin modülün url yapısının önekine değiştirebilirsiniz.

Ayrıca $stateProvider için $routeProvider den geçiş olduğunda modül ui.compat sadece gerekli olduğunu unutmayın. Normalde ui.state kullanmalısınız.

Ayrıca header.html $state.includes('root.contact')) içinde ayarlamak unutmayın

updated plunker

kaynak

2013-05-15 07:18:33

Bu nedenle, bu yaklaşım benim modüllerimi modellemeyle sıkı sıkıya bağlayacağımı iyi düşünmüyorum. Uygulama modülümdeki tüm eyaletleri tanımlayabilirim, ancak kontrolörün tümünün oraya özel olarak çözülmesini istemiyorum. Keşifleri ilgili modüllerde ayrı ayrı tanımlamanın bir yolu olsaydı. – SamSerious

@SamSerious, rotayı uygulamadan ayıran herhangi bir çözüm buldunuz mu? –

@DeividiCavarzan Tam olarak rotaları ayırmak istemedim, fakat rota tanımlarını çözüm için ilgili modüllere koydum. Aynı şeyi arıyorsanız da güncellenir. – SamSerious

Buna nasıl yaklaşacağınıza bağlı olarak değişir.

Tüm kapsamlar rootScope'dan devralır, böylece global durumu buraya yerleştirebilirsiniz. NG literature, özellikle sadece global durumu orada koymanız gerektiğini ve işlevsellik olmadığını belirtmektedir. Sistem genelinde gerekli olan işlevsellik hizmetlere aittir ve özellikle tek amacı devleti korumak olan hizmetleri uygulamamanız gerekir. Tüm öneriler, uçtan uca testlerin kolay bir şekilde yapılmasını kolaylaştıran veya engelleyen bağlamında örtük olarak paylaşılmış gibi görünmektedir. ui-router/wiki/faq

bir yaklaşım her özellik bu örnekte olduğu gibi (öyle kendi kök durumunu tanımlamak için izin vermektir: kafa karıştırıcı olsa da

kaynak

2013-05-11 12:56:32 grettke

Sadece, doğru, Açısal UI-Router bahsediyoruz açık olmak ? "Küresel devlet" hakkında konuşma şekliniz, genel olarak konuşuyorsunuz, özellikle bu kütüphanede devletler değil. – trysis

, ui-yönlendirici wiki SSS bunun mümkün olmadığını söylemek gibi görünüyor AngularJS State Management with ui-router Başka bir şey, "myApp" modülünüzdeki tüm durum hiyerarşisini tanımlamak ve denetleyicileri vb. Yalnızca bağımlı modüllerden tanımlamak olacaktır. Bu, özellikle bir mobil ve masaüstü site tutuyorsanız iyi çalışır; Her bir sitenin durum hiyerarşisini bir mobileApp ve desktopApp modülünde tanımlayın ve ayrı modüllerde paylaşılan işlevleri (örneğin, denetleyiciler, hizmetler, vb.) bulun.

kaynak

2013-05-12 16:21:43

Tamam, denediğim şey burada. Diğer modül durumlarıyla kök durumunu nasıl bağlayacağımı hala bilmiyorum. http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview – SamSerious

Örneğinizi çatallıyorum ve birkaç şey ekledim: http://plnkr.co/edit/oTjf0PIpxZE272TTLMhZ - plunker'da "geçiş" için - başlangıçta varsayılan templateUrl için "ui-view" ifadesini kullanın veya belirli bir durumdan belirli bir görünümü hedefleyin (bu durumda "container" görünümü rootdan (boş string) durumdan) –

Kişi sekmesini tıkladığımda hata alıyorum 'Böyle bir durum 'kişiler'. Her modülün kendi modüllerinde tanımlanması düşüncesi, modülün kendi içinde yer alacağı ve ayrıca modülün kendisinde çözüm tanımlayabileceğidir. – SamSerious

ui-yönlendirici angularjs - (açısal içi türetilmiş) uygulamanın belirli bir yapı ile uygulama

cevap

İlgili konular