How to apply component specific CSS using ngroute

Posted By : Vinay Tiwari | 31-May-2018

This blog explains to us, how to use component specific CSS in AngularJS.


route specific styles can be completed using these modules, we can integrate it with router provider service.


What does it do? 

It enables declaration of partial and route-specific styles in an application with the help of $routeProvider service in Angular. For example, if you are aware of how $routeProvider works, you must know that it allows you to easily setup your SPA routes by declaring a .when() block and acknowledging Angular what template (or templateUrl) to use for each route, and which controller to associate with that route. Till the time It Disables the ways to put or add particular style sheet which automatically loads whenever  the  route is hit. That resolve the issue by allowing you to do something like this:

		angular.module('myApp', ['ngRoute','routeStyles'])
			.config(['$routeProvider', function($routeProvider){
					.when('/app/route/1', {
						templateUrl: 'home/home1.html', 
						controller: 'Home1Ctrl',
						// css files can be declared for each route
						css: 'css/home1.css'
					.when('/app/route/2', {
						templateUrl: 'home/home2.html',
						controller: 'Home2Ctrl',
						// css files can optionally be declared as an array
						css: ['css/home2_1.css','css/home2_2.css']
					// more routes can be declared here

How to install:

Using bower: bower install angular-route-styles




1) Incorporate the course styles.js document to your index.html record

2) Declare the 'routeStyles' module as a dependency in your main app

angular.module('myApp', ['ngRoute','routeStyles' /* other dependencies here */]);


Explanation: ngRoute service module from angular must be included.Alternatively, the module should be available via adding the angular-route.js or angular-route.min.js script to your main HTML page. 


Explaination: this code emphasis that the Angular app must have control to the <head> tag. For example: <html ng-app="myApp">. Typically this requires that your ng-app directive is on the <html> element. 


Explanation of angular-route-styles 

Specifying a CSS property on the route is not mandatory, as it was omitted from the '/some/route/2' example. If the route doesn't have a CSS property, the service will not perform any action for that route. we can have various page dependent CSS per route, as it was in '/app/route/2' above example. In this example, the CSS property is an array of relative paths to the stylesheets needed for that route.



Request for Proposal

Recaptcha is required.

Sending message..