วิธีรวมมุมมอง / สไตล์เฉพาะบางส่วนใน AngularJS

Question 1

อะไรคือวิธีที่เหมาะสม / ได้รับการยอมรับในการใช้สไตล์ชีตแยกต่างหากสำหรับมุมมองต่างๆที่แอปพลิเคชันของฉันใช้

ตอนนี้ฉันกำลังวางองค์ประกอบลิงก์ใน html ของมุมมอง / บางส่วนที่ด้านบน แต่ฉันได้รับแจ้งว่านี่เป็นการปฏิบัติที่ไม่ดีแม้ว่าเบราว์เซอร์ที่ทันสมัยทั้งหมดจะรองรับ แต่ฉันสามารถเห็นได้ว่าทำไมจึงขมวด

ความเป็นไปได้อื่น ๆ คือการวางสไตล์ชีตแยกต่างหากใน index.html ของheadฉัน แต่ฉันต้องการให้มันโหลดสไตล์ชีตก็ต่อเมื่อมุมมองถูกโหลดในชื่อของประสิทธิภาพ

นี่เป็นการปฏิบัติที่ไม่ดีเนื่องจากการจัดรูปแบบจะไม่มีผลจนกว่าจะโหลด css จากเซิร์ฟเวอร์ทำให้เกิดการแฟลชของเนื้อหาที่ไม่ได้ฟอร์แมตอย่างรวดเร็วในเบราว์เซอร์ที่ทำงานช้าหรือไม่ ฉันยังไม่เห็นสิ่งนี้แม้ว่าฉันจะทดสอบในพื้นที่ก็ตาม

มีวิธีโหลด CSS ผ่านวัตถุที่ส่งไปยัง Angular $routeProvider.whenหรือไม่?

ขอบคุณล่วงหน้า!

Question 2

ฉันรู้ว่าตอนนี้คำถามนี้เก่าแล้ว แต่หลังจากทำการวิจัยมากมายเกี่ยวกับวิธีแก้ปัญหาต่างๆของปัญหานี้ฉันคิดว่าฉันอาจมีวิธีแก้ปัญหาที่ดีกว่านี้

อัปเดต 1:ตั้งแต่โพสต์คำตอบนี้ฉันได้เพิ่มโค้ดทั้งหมดนี้ลงในบริการง่ายๆที่ฉันโพสต์ไปยัง GitHub ซื้อคืนภาคตั้งอยู่ที่นี่ อย่าลังเลที่จะตรวจสอบสำหรับข้อมูลเพิ่มเติม

อัปเดต 2:คำตอบนี้ดีมากหากสิ่งที่คุณต้องการคือโซลูชันที่มีน้ำหนักเบาสำหรับการดึงสไตล์ชีตสำหรับเส้นทางของคุณ หากคุณต้องการโซลูชั่นที่สมบูรณ์มากขึ้นสำหรับการจัดการ stylesheets ตามความต้องการตลอดทั้งแอพลิเคชันของคุณคุณอาจต้องการที่จะชำระเงินโครงการ AngularCSS Door3 ของ มีฟังก์ชันการทำงานที่ละเอียดกว่ามาก

เผื่อว่าในอนาคตจะมีใครสนใจนี่คือสิ่งที่ฉันคิดขึ้นมา:

1. สร้างคำสั่งที่กำหนดเองสำหรับ<head>องค์ประกอบ:

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

คำสั่งนี้ทำสิ่งต่อไปนี้:

มันรวบรวม (ใช้$compile) สตริง HTML ที่ใช้สร้างชุดของ<link />แท็กสำหรับทุกรายการในscope.routeStylesวัตถุที่ใช้และng-repeatng-href
ต่อท้ายชุด<link />องค์ประกอบที่คอมไพล์นั้นเข้ากับ<head>แท็ก
จากนั้นใช้$rootScopeเพื่อฟัง'$routeChangeStart'เหตุการณ์ สำหรับทุก'$routeChangeStart'เหตุการณ์จะจับ$$routeออบเจ็กต์"ปัจจุบัน" (เส้นทางที่ผู้ใช้กำลังจะออก) และลบไฟล์ css เฉพาะบางส่วนออกจาก<head>แท็ก นอกจากนี้ยังจับ$$routeออบเจ็กต์"next" (เส้นทางที่ผู้ใช้กำลังจะไป) และเพิ่มไฟล์ css เฉพาะบางส่วนลงใน<head>แท็ก
และng-repeatส่วนหนึ่งของ<link />แท็กที่คอมไพล์จะจัดการการเพิ่มและการลบสไตล์ชีตเฉพาะหน้าทั้งหมดตามสิ่งที่เพิ่มหรือลบออกจากscope.routeStylesออบเจ็กต์

หมายเหตุ: นี้ต้องการให้คุณng-appแอตทริบิวต์อยู่ใน<html>องค์ประกอบที่ไม่ได้อยู่ในหรือสิ่งที่อยู่ภายใน<body><html>

2. ระบุสไตล์ชีตที่เป็นของเส้นทางโดยใช้$routeProvider:

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

การกำหนดค่านี้เพิ่มcssคุณสมบัติที่กำหนดเองให้กับออบเจ็กต์ที่ใช้ในการตั้งค่าเส้นทางของแต่ละเพจ วัตถุที่ได้รับการส่งผ่านไปยังแต่ละเหตุการณ์เป็น'$routeChangeStart' .$$routeดังนั้นเมื่อฟัง'$routeChangeStart'เหตุการณ์เราสามารถคว้าcssคุณสมบัติที่เราระบุไว้และต่อท้าย / ลบ<link />แท็กเหล่านั้นได้ตามต้องการ โปรดทราบว่าการระบุcssคุณสมบัติบนเส้นทางเป็นทางเลือกโดยสมบูรณ์เนื่องจากถูกละเว้นจาก'/some/route/2'ตัวอย่าง หากเส้นทางนั้นไม่มีcssคุณสมบัติ<head>คำสั่งก็จะไม่ทำอะไรเลยสำหรับเส้นทางนั้น โปรดทราบว่าคุณยังสามารถมีสไตล์ชีตเฉพาะเพจได้หลายหน้าต่อเส้นทางดัง'/some/route/3'ตัวอย่างด้านบนโดยที่cssคุณสมบัติคืออาร์เรย์ของพา ธ สัมพัทธ์ไปยังสไตล์ชีทที่จำเป็นสำหรับเส้นทาง

3. คุณทำเสร็จแล้ว สองสิ่งนี้ตั้งค่าทุกอย่างที่จำเป็นและในความคิดของฉันด้วยรหัสที่สะอาดที่สุดเท่าที่จะเป็นไปได้

หวังว่าจะช่วยคนอื่นที่อาจกำลังดิ้นรนกับปัญหานี้ได้มากเท่าที่ฉันเป็น

Question 3

วิธีแก้ปัญหาของ @ tennisgent นั้นยอดเยี่ยมมาก อย่างไรก็ตามฉันคิดว่ามีข้อ จำกัด เล็กน้อย

Modularity และ Encapsulation ใน Angular ไปไกลกว่าเส้นทาง จากวิธีที่เว็บกำลังก้าวไปสู่การพัฒนาตามองค์ประกอบสิ่งสำคัญคือต้องใช้สิ่งนี้ในคำสั่งเช่นกัน

ดังที่คุณทราบแล้วใน Angular เราสามารถรวมเท็มเพลต (โครงสร้าง) และคอนโทรลเลอร์ (พฤติกรรม) ในเพจและคอมโพเนนต์ AngularCSSเปิดใช้งานชิ้นส่วนสุดท้ายที่ขาดหายไป: การแนบสไตล์ชีท (การนำเสนอ)

สำหรับวิธีแก้ปัญหาแบบเต็มฉันขอแนะนำให้ใช้ AngularCSS

รองรับ ngRoute, UI Router, directives, controllers และ services ของ Angular
ไม่จำเป็นต้องมีng-appใน<html>แท็ก นี่เป็นสิ่งสำคัญเมื่อคุณมีหลายแอพที่ทำงานในหน้าเดียวกัน
คุณสามารถกำหนดตำแหน่งที่จะฉีดสไตล์ชีทได้: หัว, ตัว, ตัวเลือกแบบกำหนดเอง ฯลฯ ...
รองรับการโหลดล่วงหน้าการคงอยู่และการป้องกันแคช
รองรับการสืบค้นสื่อและเพิ่มประสิทธิภาพการโหลดหน้าผ่าน matchMedia API

https://github.com/door3/angular-css

นี่คือตัวอย่างบางส่วน:

เส้นทาง

  $routeProvider
    .when('/page1', {
      templateUrl: 'page1/page1.html',
      controller: 'page1Ctrl',
      /* Now you can bind css to routes */
      css: 'page1/page1.css'
    })
    .when('/page2', {
      templateUrl: 'page2/page2.html',
      controller: 'page2Ctrl',
      /* You can also enable features like bust cache, persist and preload */
      css: {
        href: 'page2/page2.css',
        bustCache: true
      }
    })
    .when('/page3', {
      templateUrl: 'page3/page3.html',
      controller: 'page3Ctrl',
      /* This is how you can include multiple stylesheets */
      css: ['page3/page3.css','page3/page3-2.css']
    })
    .when('/page4', {
      templateUrl: 'page4/page4.html',
      controller: 'page4Ctrl',
      css: [
        {
          href: 'page4/page4.css',
          persist: true
        }, {
          href: 'page4/page4.mobile.css',
          /* Media Query support via window.matchMedia API
           * This will only add the stylesheet if the breakpoint matches */
          media: 'screen and (max-width : 768px)'
        }, {
          href: 'page4/page4.print.css',
          media: 'print'
        }
      ]
    });

คำสั่ง

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  }
});

นอกจากนี้คุณสามารถใช้$cssบริการสำหรับกรณีขอบ:

myApp.controller('pageCtrl', function ($scope, $css) {

  // Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
  $css.bind({ 
    href: 'my-page/my-page.css'
  }, $scope);

  // Simply add stylesheet(s)
  $css.add('my-page/my-page.css');

  // Simply remove stylesheet(s)
  $css.remove(['my-page/my-page.css','my-page/my-page2.css']);

  // Remove all stylesheets
  $css.removeAll();

});

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ AngularCSS ได้ที่นี่:

http://door3.com/insights/introducing-angularcss-css-demand-angularjs

Question 4

$routeProviderสามารถผนวกสไตล์ใหม่ที่ศีรษะภายใน เพื่อความเรียบง่ายฉันใช้สตริง แต่สามารถสร้างองค์ประกอบลิงก์ใหม่ได้ด้วยหรือสร้างบริการสำหรับสไตล์ชีต

/* check if already exists first - note ID used on link element*/
/* could also track within scope object*/
if( !angular.element('link#myViewName').length){
    angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');
}

ประโยชน์ที่ใหญ่ที่สุดของการ prelaoding ในหน้าคือภาพพื้นหลังใด ๆ ที่จะมีอยู่แล้ว FOUC

Question 5

@ sz3 วันนี้ตลกมากฉันต้องทำสิ่งที่คุณพยายามจะบรรลุ: ' โหลดไฟล์ CSS เฉพาะเมื่อผู้ใช้เข้าถึง ' หน้าใดหน้าหนึ่งเท่านั้น เลยใช้วิธีแก้ข้างบน

แต่ฉันมาที่นี่เพื่อตอบคำถามสุดท้ายของคุณ: ' ฉันควรใส่รหัสไว้ที่ไหน ความคิดใด ๆ ? '

คุณคิดถูกต้องรวมรหัสลงในการแก้ปัญหาแต่คุณต้องเปลี่ยนรูปแบบเล็กน้อย

ดูรหัสด้านล่าง:

.when('/home', {
  title:'Home - ' + siteName,
  bodyClass: 'home',
  templateUrl: function(params) {
    return 'views/home.html';
  },
  controler: 'homeCtrl',
  resolve: {
    style : function(){
      /* check if already exists first - note ID used on link element*/
      /* could also track within scope object*/
      if( !angular.element('link#mobile').length){
        angular.element('head').append('<link id="home" href="home.css" rel="stylesheet">');
      }
    }
  }
})

ฉันเพิ่งทดสอบและใช้งานได้ดีมันฉีด html และโหลด 'home.css' ของฉันเฉพาะเมื่อฉันกดเส้นทาง '/ home'

สามารถดูคำอธิบายทั้งหมดได้ที่นี่แต่โดยพื้นฐานแล้วแก้ไข:ควรได้รับวัตถุในรูปแบบ

{
  'key' : string or function()
}

คุณสามารถตั้งชื่อ ' คีย์ ' อะไรก็ได้ที่คุณต้องการ - ในกรณีของฉันฉันเรียกว่า ' สไตล์ '

จากนั้นสำหรับมูลค่าคุณมีสองตัวเลือก:

หากเป็นสตริงแสดงว่าเป็นนามแฝงของบริการ
ถ้ามันเป็นฟังก์ชันมันจะถูกฉีดเข้าไปและค่าที่ส่งคืนจะถือว่าเป็นการอ้างอิง

ประเด็นหลักที่นี่คือโค้ดภายในฟังก์ชันจะถูกเรียกใช้งานก่อนที่ตัวควบคุมจะถูกสร้างอินสแตนซ์และเหตุการณ์ $ routeChangeSuccess จะเริ่มทำงาน

หวังว่าจะช่วยได้

Question 6

สุดยอดขอบคุณ !! ต้องทำการปรับเปลี่ยนเล็กน้อยเพื่อให้มันทำงานกับ ui-router:

    var app = app || angular.module('app', []);

    app.directive('head', ['$rootScope', '$compile', '$state', function ($rootScope, $compile, $state) {

    return {
        restrict: 'E',
        link: function ($scope, elem, attrs, ctrls) {

            var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
            var el = $compile(html)($scope)
            elem.append(el);
            $scope.routeStyles = {};

            function applyStyles(state, action) {
                var sheets = state ? state.css : null;
                if (state.parent) {
                    var parentState = $state.get(state.parent)
                    applyStyles(parentState, action);
                }
                if (sheets) {
                    if (!Array.isArray(sheets)) {
                        sheets = [sheets];
                    }
                    angular.forEach(sheets, function (sheet) {
                        action(sheet);
                    });
                }
            }

            $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

                applyStyles(fromState, function(sheet) {
                    delete $scope.routeStyles[sheet];
                    console.log('>> remove >> ', sheet);
                });

                applyStyles(toState, function(sheet) {
                    $scope.routeStyles[sheet] = sheet;
                    console.log('>> add >> ', sheet);
                });
            });
        }
    }
}]);

Question 7

หากคุณต้องการเพียงแค่นำ CSS ของคุณไปใช้กับข้อมูลพร็อพเพอร์ตี้เดียวฉันใช้ข้อมูลโค้ดที่มีประโยชน์นี้ในตัวควบคุม

$("body").addClass("mystate");

$scope.$on("$destroy", function() {
  $("body").removeClass("mystate"); 
});

สิ่งนี้จะเพิ่มคลาสให้กับbodyแท็กของฉันเมื่อสถานะโหลดและลบออกเมื่อสถานะถูกทำลาย (เช่นมีคนเปลี่ยนเพจ) สิ่งนี้ช่วยแก้ปัญหาที่เกี่ยวข้องของฉันที่ต้องใช้ CSS กับสถานะเดียวในแอปพลิเคชันของฉันเท่านั้น

Question 8

'ใช้อย่างเข้มงวด'; angular.module ('app') .run (['$ rootScope', '$ state', '$ stateParams', ฟังก์ชัน ($ rootScope, $ state, $ stateParams) {$ rootScope. $ state = $ state; $ rootScope . $ stateParams = $ stateParams;}]) .config (['$ stateProvider', '$ urlRouterProvider', ฟังก์ชัน ($ stateProvider, $ urlRouterProvider) {

            $urlRouterProvider
                .otherwise('/app/dashboard');
            $stateProvider
                .state('app', {
                    abstract: true,
                    url: '/app',
                    templateUrl: 'views/layout.html'
                })
                .state('app.dashboard', {
                    url: '/dashboard',
                    templateUrl: 'views/dashboard.html',
                    ncyBreadcrumb: {
                        label: 'Dashboard',
                        description: ''
                    },
                    resolve: {
                        deps: [
                            '$ocLazyLoad',
                            function($ocLazyLoad) {
                                return $ocLazyLoad.load({
                                    serie: true,
                                    files: [
                                        'lib/jquery/charts/sparkline/jquery.sparkline.js',
                                        'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
                                        'lib/jquery/charts/flot/jquery.flot.js',
                                        'lib/jquery/charts/flot/jquery.flot.resize.js',
                                        'lib/jquery/charts/flot/jquery.flot.pie.js',
                                        'lib/jquery/charts/flot/jquery.flot.tooltip.js',
                                        'lib/jquery/charts/flot/jquery.flot.orderBars.js',
                                        'app/controllers/dashboard.js',
                                        'app/directives/realtimechart.js'
                                    ]
                                });
                            }
                        ]
                    }
                })
                .state('ram', {
                    abstract: true,
                    url: '/ram',
                    templateUrl: 'views/layout-ram.html'
                })
                .state('ram.dashboard', {
                    url: '/dashboard',
                    templateUrl: 'views/dashboard-ram.html',
                    ncyBreadcrumb: {
                        label: 'test'
                    },
                    resolve: {
                        deps: [
                            '$ocLazyLoad',
                            function($ocLazyLoad) {
                                return $ocLazyLoad.load({
                                    serie: true,
                                    files: [
                                        'lib/jquery/charts/sparkline/jquery.sparkline.js',
                                        'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
                                        'lib/jquery/charts/flot/jquery.flot.js',
                                        'lib/jquery/charts/flot/jquery.flot.resize.js',
                                        'lib/jquery/charts/flot/jquery.flot.pie.js',
                                        'lib/jquery/charts/flot/jquery.flot.tooltip.js',
                                        'lib/jquery/charts/flot/jquery.flot.orderBars.js',
                                        'app/controllers/dashboard.js',
                                        'app/directives/realtimechart.js'
                                    ]
                                });
                            }
                        ]
                    }
                })
                 );