AngularJS style switcher

By Anonymous
It's often the case that you want to provide more than one CSS stylesheet for your app or website. You can do this by including a style switching function in your app. Here's how to do it in AngularJS.



In the HTML, create a button for each stylesheet that you want to switch between, and pass in the filename of the stylesheet as a variable:
<button ng-click="changeStyle('colors.css')" id="pink">Brookes Pink</button><br />
 <button ng-click="changeStyle('colors-lime.css')" id="lime">Brookes Lime</button><br />
 <button ng-click="changeStyle('colors-muted.css')" id="muted">Muted colours</button><br />
 <button ng-click="changeStyle('colors-dark.css')" id="dark">Dark colours</button>
You will also need to put the ng-app attribute in the <html> element, and an angular variable in the path to the stylesheet:
<html ng-app="myApp">

<head>

<link rel="stylesheet" data-ng-href="css/{{ filename }}" />
In the Angular (app.js), create a settings controller with a changeStyle function. Note that the stylesheet variable is a rootscope variable because the variable we are changing is in the <head>, outside of any block governed by a controller.
 .controller('settingsCtrl',
['$rootScope', '$scope', '$uibModal', '$routeParams', '$log', '$timeout', '$http',
    function ($rootScope, $scope, $uibModal, $routeParams, $log, $timeout, $http) {
        $scope.settings = [];
        $rootScope.filename = $.jStorage.get('myStyle', '') || 'colors';
        $scope.changeStyle = function (stylesheet) {
            $rootScope.filename = stylesheet;
            $.jStorage.set('myStyle', stylesheet, { TTL: 28800000 });
        };
    }])
I have used jStorage to store the user's preference for a stylesheet, but you could also use cookies.

Comments

Post a Comment

Popular posts from this blog

We're in Onstream

By Anonymous
The pilot phase of the Brookes ID project was announced in the latest issue of Onstream , the staff magazine of Oxford Brookes University: Brookes ID (Individual Development) is an inclusive co-curricular framework which has been created with students and is a PESE (Programme to enhance the Student Experience) project. It recognises and rewards student engagement and commitment beyond their programme of study and is aligned to the Brookes Guiding Principles. As part of the Brookes ID initiative a new app has been launched which will run this semester as a pilot, leading up to the official launch of Brookes ID expected in September 2017. The Brookes ID app has been developed by the project team (Professor Alison Honour ADSE, Dr Bob Champion PLSE, Lindsay Williams PLSE, Yvonne Aburrow) and the Student Experience team in OBIS, in partnership with students. It monitors the extra and co-curricular activities of students and rewards them with ‘achievements’. Initially the number of activiti...
Read more

Agile methodology in the wild

By Anonymous
Image
Agile methodologies like Scrum sound amazingly efficient when presented by people who have implemented them in a non-hostile environment. But conditions are not always perfect, and things can sometimes go wrong. One of the key features of agile project methodologies is that they have different types of meetings . Each different type of meeting has a very specific function. They can become tedious and unproductive if they deviate from the prescribed form and function. With that in mind, let's look at the different types of meeting, how they are meant to work, and what can go wrong. Three Amigos     © Copyright  Peter Trimming  and licensed for  reuse  under this  Creative Commons Licence . Three Amigos This is a relatively new type of meeting in the agile toolkit, and was developed in 2013 . Essentially, this is a meeting during which the business analyst (BA) presents the requirements and tests for a new feature. The Three Amigos (BA, developer, and QA...
Read more