Blog

  • 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

     

Tags: AngularJS