How to load css by using requirejs?

Question

This is my requirejs config file. I'm using require js on my angular based project. If I could load css with requirejs I would be able to organize my css files too! I'm new to requirejs concept. Any help appreciated

require.config({
    paths:{
        'angular'       : "agular",
        'app'           : 'app',
        'coreModel'     : 'coreModel',
        'test'          : 'controller/test'
    },
    shim: {
        'app' : {
            deps :['angular','coreModel',]
        },

        'coreModel' : {
            deps : ['angular','test']
        },
        'test' : {
            deps : ['angular',]
        }
    },
});

require(['app',],function(){
    angular.bootstrap(document,['app']);
});

This is my main controller

define(function(){

    var coreModel = angular.module('coreModel',['test']);

    coreModel.controller('mainController',function($scope){
        $scope.test = "Hello World";
    });
});

How can I load css with requirejs ?

Answer 1

I would rather suggest you to something different using a ocLazyLoad.

Reference to my answer here

Follow the initial steps of the above link for configuration

I would suggest you to use this way in your Controller file as below

(function () {
    angular.module('myApp').controller("homeCtrl", function ($ocLazyLoad,$scope) {

          //this line loads your styles and apply it 
          $ocLazyLoad.load('style.css');

});
})();

LIVE DEMO

Note: In the demo click on the menu- > click home