Dynamic theme using url Param

Question

I have one requirement. Can you anybody suggest the possible ways to achieve it.

I want to change the theme of my application based on the URL passed in every routes.I am using the below technologies. - Frontend : Angular JS - Backend : Node.js

eg: localhost/x/about localhost/y/about

I achieved these via cookies by passing the param using localtion.search at the time of login. But I need that theme param in all the routes.Based on that theme need to change.Can anyone suggest the possible ways.

app.js

app = angular.module('themeApp', ['ngRoute'])  
app.config(function($routeProvider){
$routeProvider
 .when('/',{
    templateUrl: 'home.html'
 })
 .when('/:id/about',{
    templateUrl: 'about.html'
 })
.otherwise({
    redirectTo: '/'
});
});
app.controller('themeController', function ($scope, $routeParams) {  
 console.log($routeParams.id);
 // set the default theme   
 $scope.css = $routeParams.id;
});

menu.html (it is not complete, confuse here. please correct, how to call)

 <li>
   <a href="about">About</a>

 </li>
 <li>
     <a href="home">Home</a>

 </li>

index.html

 <html ng-app="themeApp" ng-controller="themeController">  
 <head>  
  <!-- pull in css based on angular -->  
 <link rel="stylesheet" ng-href="css/{{css}}.css">   
 </head>  
 <body>  
 <div ng-view></div>
    <!-- bring in JS and angular -->  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular.js">        </script>
    <script rc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular-route.js"></script>

    <script src="app.js"> </script> 
  </body>  
  </html>

css/

it contains the three files,
- red.css

body{  
  background-color: red;
  color: #333;
  font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;  
  font-size: 15px; 
}

green.css body{
background-color: green; color: #333; font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
font-size: 15px; }
- blue.css body{
  background-color: blue; color: #333; font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
  font-size: 15px; }

yjimk yjimk · Accepted Answer · 2015-12-21T08:55:19

The quick and simple answer would be to use $rootScope. $rootScope is available to all controllers, but like all global variables should be used sparingly.

Here's a good post explaining $rootScope. http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS-$rootScope-and-$scope.html

Basically if you're using it on your two controllers for pages x and y

app.controller('login',['$scope','$rootScope', function ($scope,$rootScope) {
    $rootScope.foo='bar';
}]);

app.controller('xCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.lorem=$rootScope.foo;
    console.log($scope.lorem); //bar
}]);

app.controller('yCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.ipsum=$rootScope.foo;
    console.log($scope.ipsum); //bar
}]);

Can then use them in your HTML markup as normal.

Using $rootScope is much simpler, but if you wanted to use the router to pull down the id each time, it is also possible.

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.foo=$routeParams.id;
}]);

If you have a lot more pages than just /about I could imagine this getting a bit tricky with the routing.

You could even couple it with root scope then pass it around to your other controllers.

app.controller('xCtrl',['$scope','$rootScope','$routeParams', function($scope,$rootScope,$routeParams){
    $rootScope.foo=$routeParams.id;
    $scope.lorem=$rootScope.foo;
}]);

--EDIT based on comment-- I might need some code to be sure of what you're after, but perhaps this clarifies?

URL: mysite.com/blue/about

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.theme=$routeParams.id;
}]);

HTML

<div ng-controller="xCtrl">
    <div ng-class="{{theme}}">
        My theme is {{theme}}.
    </div>
</div>

CSS

.blue
{
    background-color: blue;
}
.green
{
    background-color: green;
}