Bagaimana untuk Menguruskan Lembaran Gaya Khusus Lihat dengan Cekap dalam Aplikasi AngularJS?

Melindungi Pandangan AngularJS dengan Penggayaan Berasaskan Laluan

Ikhtisar

Aplikasi AngularJS selalunya memerlukan lembaran gaya yang berasingan untuk paparan berbeza bagi meningkatkan pengalaman pengguna. Walau bagaimanapun, menggunakan elemen dalam pandangan individu boleh membawa kepada isu prestasi. Artikel ini meneroka penyelesaian komprehensif untuk memuatkan helaian gaya khusus paparan secara dinamik, meminimumkan peralihan reka letak.

Penyelesaian Cadangan

Penyelesaian yang dicadangkan melibatkan penciptaan arahan tersuai untuk elemen dan mengemas kini konfigurasi AngularJS $routeProvider.

tersuai; Arahan

1. Tentukan arahan yang menyusun set elemen berdasarkan objek skop routeStyles.
2. Tambahkan elemen ke tag.
3. Dengar acara $routeChangeStart dan tambah/buang elemen berdasarkan laluan semasa dan seterusnya.

Konfigurasi Laluan AngularJS

1. Tambahkan sifat css pada setiap objek laluan dalam konfigurasi $routeProvider.
2. Nyatakan laluan relatif kepada lembaran gaya yang sepadan dengan laluan.

Pelaksanaan

Arahan Tersuai:

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) {
                ... (code to add/remove `<link>` elements based on routes) ...
            });
        }
    }
}]);

Konfigurasi Laluan AngularJS:

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html',
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })

        ... (other routes as needed) ...
}]);

Atas ialah kandungan terperinci Bagaimana untuk Menguruskan Lembaran Gaya Khusus Lihat dengan Cekap dalam Aplikasi AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!