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.
angular-route-styles
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){
$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
OR
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.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vinay Tiwari
Vinay is a bright UI developer, having knowledge of HTML, CSS, Bootstrap, Jquery and AngularJs. His hobbies are interacting with people, listening music etc.