AngularJS - Tek şablonda çoklu ng görünümü

132

AngularJS kullanarak dinamik bir web uygulaması oluşturuyorum. ng-viewTek bir şablonda birden fazla olması mümkün mü ?

angularjs ng-view

— Jayram
kaynak

2

hala bazı hatalarla birlikte bir çekme isteği var gibi görünüyor: github.com/angular/angular.js/pull/1198

— Alp

4

Jan Varwig direktiflerin Angular'daki rolü hakkında yazıyor. Sorunuzun cevabı değil, ancak bazı durumlarda fikirleri iyi bir alternatif olabilir: jan.varwig.org/archive/angularjs-views-vs-directives/…

— Juha Palomäki

açısal öğreticiden geçiyordu ve aynı soruyu

— sordular

100

Sadece bir tane alabilirsin ng-view.

Birkaç şekilde içeriğini değiştirebilirsiniz: ng-include, ng-switchya routeProvider aracılığıyla haritalama farklı kontrolörleri ve şablonları.

— pasine
kaynak

1

haritalama kontrolörleri ve şablonları tüm ng-view elemanının yerini alacak, değil mi?

— zx1986

9

Bir widget'ın içeriğini dinamik olarak değiştirmeye ne dersiniz? Pencere öğesi için bir görünüm ve pencere öğesi için bir denetleyici ve pencere öğesi için bir model oluşturmak istemez misiniz?

— Ray Suelzer

Görünümlerin kullanılması tavsiye edilir mi? Div'leri ng-showve ile tanımlamak ve ng-hidedeğişkenleri kullanarak görünürlüğünü kontrol etmek daha iyi değil mi? Çünkü bazen birden fazla bileşeni gizlemek / göstermek isteyebilirim

— SomethingSomething

39

UI-Router , yardımcı olabilecek bir projedir: https://github.com/angular-ui/ui-router Özelliklerinden biri Çoklu Adlandırılmış Görünümlerdir

UI-Router birçok özelliğe sahiptir ve gelişmiş bir uygulama üzerinde çalışıyorsanız kullanmanızı tavsiye ederim.

Birden Çok Adlandırılmış Görünüm belgelerine buradan bakın .

— Morteza Ziyae
kaynak

6

Maalesef ui-yönlendirici benioku'nun dediği gibi: Not: UI-Router aktif geliştirme aşamasındadır. Bu nedenle, bu kitaplık iyi test edilirken API değişebilir. Yalnızca bir değişiklik günlüğünü takip etme ve kullanımınızı buna göre güncelleme konusunda rahatsanız üretim uygulamalarında kullanmayı düşünün.

— trainoasis

1

@trainoasis Bunu birden fazla proje için kullandı, 'çok' kararlı görünüyor ve şimdiye kadar API değiştirme konusunda hiçbir sorunum olmadı, aslında API'de büyük bir değişiklik hatırlamıyorum.

— Murtaza Ziyae

19

Sadece bekar olarak başarabileceğine inanıyorum ng-view. Ana şablonda ng-includealt görünümler için bölümlere sahip olabilir , ardından ana kontrolörde her bir alt şablon için model özelliklerini tanımlayabilirsiniz. Böylece ng-includebölümlere otomatik olarak bağlanacaklar . Bu, birden çokng-view

Belgelerde verilen örneği kontrol edebilirsinizng-include

Örnekte açılır listeden şablonu değiştirdiğinizde içeriği de değiştirir. Burada bir ana sayfanız olduğunu varsayın ng-viewve açılır menüyü seçerek alt içeriği manuel olarak seçmek yerine, ana görünüm yüklendiğinde olduğu gibi yaparsınız.

— Tekz
kaynak

2

UI-Router gibi bir çözümün yokluğunda, ng-include gerçekten de açıkladığınız gibi geçerli bir alternatiftir. Ng-include'in başaramayacağı şey, URL (durum) güdümlü çoklu görünümlerdir, $ route, geçerli URL'ye dayalı olarak farklı görünümleri dinamik olarak oluşturamaz. Angular'ın kollarını bükebilir ve ng-include dokümantasyondaki örnek gibi denetleyicide özel mantık kullanarak bunu gerçekleştirebiliriz , ancak bu arzu edilen uygulama mimarisi modeli değildir, UI-Router doğru çözüm türüdür.

— Yiling

@ Yiling yorumu için bir artı. Ng-include kullanmak geçici bir çözümdür.

— Farshid Saberi

13

Normal ng-viewmodülü kullanarak birden fazla dinamik şablonunuz olamaz.

Bununla birlikte, bu proje bunu yapmanızı sağlar (arayın ui-router).

— ŁukaszBachman
kaynak

3

angular-ui (yakın) gelecekte iyi bir seçim gibi görünüyor, ancak üretim kullanımı için hala çok dengesiz görünüyor

— David Barreto,

8

Birden çok veya iç içe görünüme sahip olmak mümkündür. Ama ng-view ile değil.

Açısal olarak birincil yönlendirme modülü birden fazla görünümü desteklemez. Ancak ui-yönlendiriciyi kullanabilirsiniz. Bu, Github, açısal-ui / ui-yönlendirici aracılığıyla alabileceğiniz üçüncü taraf bir modüldür, https://github.com/angular-ui/ui-router . Ayrıca ngRouter'ın (ngNewRouter) yeni bir sürümü şu anda geliştirilmektedir. Şu anda kararlı değil. Bu yüzden size ui-router ile basit bir başlangıç örneği veriyorum. Bunu kullanarak görünümleri adlandırabilir ve bunları oluşturmak için hangi şablonların ve denetleyicilerin kullanılması gerektiğini belirleyebilirsiniz. $ StateProvider'ı kullanarak, belirli bir durum için görünüm yer tutucularının nasıl işleneceğini belirtmelisiniz.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Bu örnek için angularjs ve angular-ui.router referansına ihtiyacınız var.

$ bower install angular-ui-router

— Korkak Saberi
kaynak

Teşekkürler Farshid, bu harika! Bu söz edilmesi gereken açısal-ui / ui-yönlendirici Github depo github.com/angular-ui/ui-router ben modülü var

— totallytotallyamazing

Bunu neden yapmanız gerektiğinden emin değilim. Neden üstbilgi / altbilgiyi içermiyor ve içeriği ng-görüntülemiyorsunuz?

— user441521

ng-include, dosyalar barındırılıyorsa çalışacaktır, örneğin. nodejs üzerinde. Yerel dizinle çalışılıyorsa, etki alanları arası bir hata verir.

— Sid

0

Birden çok ng görünümüne sahip olamazsınız. İhtiyacımı çözdüğüm kullanım durumum aşağıdadır. Model diyaloğumda sekmeli davranışa sahip olmak istedim. Yönlendirici bağlantılarını çağıracak köprüye sahip sekmelere tıklarken sorunla karşılaşıyordum. Bunu sekmeler için button ve css kullanarak çözdüm. Kullanıcı sekmeyi tıkladığında, aslında her zaman ng-yönlendiriciyi çağıracak herhangi bir köprü çağırmayacaktır. Kullanıcı sekmeyi tıkladığında, html'yi dinamik olarak yüklediğim bir yöntemi çağıracaktır. Aşağıda, sekmeye tıklama işlevi

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Kullanıcı $ templateRequest. Test_template.html sayfasında html içeriğinizi ekleyin. Bu html içeriği denetleyicinize bağlanacaktır.

— Aslam anwer
kaynak