How to Avoid Inline CSS in AngularJS Views and Maintain Clean, Efficient Code?

Avoiding Inline CSS in AngularJS Views: Best Practices

Including view-specific CSS in AngularJS applications presents a common challenge. The traditional method of adding a element within the view HTML is considered outdated.

Proposed Solution

To address this issue, a comprehensive solution has emerged that offers both flexibility and performance optimizations:

Custom Directive for Element

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile){
        return {
            restrict: 'E',
            link: function(scope, elem){
                scope.routeStyles = {};
                $rootScope.$on('$routeChangeStart', function (e, next, current) { ... });
            }
        };
    }
]);

Route Configuration with Custom CSS Property

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

Advantages

• Avoids inline CSS for improved maintainability
• Enforces a consistent approach across the application
• Supports multiple page-specific stylesheets per route
• Optimises performance by only loading CSS when the corresponding view is displayed

The above is the detailed content of How to Avoid Inline CSS in AngularJS Views and Maintain Clean, Efficient Code?. For more information, please follow other related articles on the PHP Chinese website!