Nasıl AngularJS görünümünde kısmi özel stil eklemek

SORU

4 Mart 2013, PAZARTESİ

Nasıl AngularJS görünümünde kısmi özel stil eklemek

Yani, Yeoman benim yeni iskele proje için kullandım ve bower, grunt, ve AutoReload kullanarak, ben bile nasıl verimli dev ortamı bu tür olabileceğimi fark ettim SEVİYORUM. Ben her zaman karmaşıklığı nedeniyle geri çevirdi.

Her neyse, bu başka bir konu. Küçük bir sorunum var bir şey ile Açısal.

Benim uygulamanın kullandığı çeşitli görünümler için ayrı bir stil kullanmak için uygun/kabul yolu nedir?

Şu anda ben yerleştirerek bir bağlantı elemanı görünümünde kısmi html tepede ama söylendi bu kötü uygulama olsa da, tüm modern tarayıcılar destekliyor ama neden bu hoş karşılanmaz.

Diğer olasılık benim index.html's 2* *ama sadece görünümü performans adına yükleniyor eğer stil yüklemek istiyorum. ayrı bir stil yaratmaktadır

Stil css sunucusu formu, yavaş bir tarayıcı biçimlendirilmemiş içeriği hızlı bir flash lider yüklendikten sonra kadar etkili olmayacaktır çünkü bu kötü bir uygulamadır? Henüz yerel olarak test olmama rağmen bu tanık var.

Bir şekilde $routeProvider.when Açısal nesne geçti CSS yük var mı?

Şimdiden teşekkürler!

CEVAP

5 Aralık 2013, PERŞEMBE

Bu soru eski olduğunu biliyorum, ama bu sorun için çeşitli çözümler konusunda araştırma bir ton yaptıktan sonra, daha iyi bir çözüm olabilir düşünüyorum.

GÜNCELLEME 1:Bu cevap açtığından beri, GitHub için attılar bu kadar basit bir hizmet için bu kodu ekledim. Repo here yer almaktadır. Daha fazla bilgi için bunu kontrol etmek çekinmeyin.

GÜNCELLEME 2:Bu cevap Eğer ihtiyacınız olan tüm rotalar için stil çekmek için basit bir çözüm ise harika. Eğer isteğe bağlı uygulama boyunca stil yönetmek için daha kapsamlı bir çözüm istiyorsanız, çıkış 38* *isteyebilirsiniz. Çok daha ince taneli işlevselliği sağlar.

Gelecekte ilgilenen varsa eğer, burada ne buldum

1. <head> eleman Direktif: bir özel oluşturmak

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile){
        return {
            restrict: 'E',
            link: function(scope, elem){
                var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
                elem.append($compile(html)(scope));
                scope.routeStyles = {};
                $rootScope.$on('$routeChangeStart', function (e, next, current) {
                    if(current && current.$$route && current.$$route.css){
                        if(!angular.isArray(current.$$route.css)){
                            current.$$route.css = [current.$$route.css];
                        }
                        angular.forEach(current.$$route.css, function(sheet){
                            delete scope.routeStyles[sheet];
                        });
                    }
                    if(next && next.$$route && next.$$route.css){
                        if(!angular.isArray(next.$$route.css)){
                            next.$$route.css = [next.$$route.css];
                        }
                        angular.forEach(next.$$route.css, function(sheet){
                            scope.routeStyles[sheet] = sheet;
                        });
                    }
                });
            }
        };
    }
]);

Bu yönerge şunları yapar:

($compile kullanarak) scope.routeStyles nesne ng-repeat ng-href kullanarak her öğe için <link /> etiketleri kümesi oluşturur bir html dize derler.
<head> etiketi <link /> elementlerin derlenmiş bir set ekler.
O zaman $rootScope '$routeChangeStart' olayları dinlemek için kullanır. Her '$routeChangeStart' olay, onu kapmak "geçerli" $$route nesne (yol kullanıcı hakkında bırakın) ve kaldırır onun kısmi özgü css dosya(lar) <head> etiket. Ayrıca kapmak "sonraki" $$route nesne (yol kullanıcı hakkında gitmek) ve ekler onun bağlı kısmi özgü css dosya(lar) <head> etiket.
Ve ng-repeat bölümü derlenmiş <link /> etiketi kolları tüm ekleme ve çıkarma sayfası, belirli bir stil neye göre eklenen veya kaldırılan gelen scope.routeStyles nesne.

2. $routeProvider kullanarak hangi ait belirtin:

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html', 
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })
        .when('/some/route/2', {
            templateUrl: 'partials/partial2.html',
            controller: 'Partial2Ctrl'
        })
        .when('/some/route/3', {
            templateUrl: 'partials/partial3.html',
            controller: 'Partial3Ctrl',
            css: ['css/partial3_1.css','css/partial3_2.css']
        })
}]);

Bu yapılandırma kurulum için her sayfanın rota kullanılan nesne için özel bir css özellik ekler. Bu nesne .$$route '$routeChangeStart' Her bir olay geçti. '$routeChangeStart' olayı dinlerken, belirtilen css özelliği alıp/gerektiği gibi <link /> Bu etiketleri kaldırmak ekleyin. Yol üzerinde css özellik belirleme '/some/route/2' örnek atlanmış olduğu gibi, tamamen isteğe bağlıdır, unutmayın. Eğer rota css bir özelliği yok eğer doğru değilse, <head> Direktif sadece bu yol için hiçbir şey yapacağız. Not da ekleyebilirsiniz hatta birden fazla sayfaya özgü stil başına yol gibi '/some/route/3' yukarıdaki örnekte, nerede css özellik ise bir dizi göreli yollara stil için gerekli olan rota.