Angular: Adding custom script/css to partials via controller

Question

I am trying to add custom page CSS/JS to my partials via controllers, i have created a custom directive for it but when i am loading the CSS using it it gets unnecessary parameters which i don't want, and when i load JS using it my JS does not load the the right time(meaning the init functions written in the page gets called before, leaving the error)

DIRECTIVE

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile){
        return {
            restrict: 'E',
            link: function(scope, elem){
                var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
                elem.append($compile(html)(scope));
                scope.routeStyles = {};
                $rootScope.$on('$routeChangeStart', function (e, next, current) {
                    if(current && current.$$route && current.$$route.css){
                        if(!Array.isArray(current.$$route.css)){
                            current.$$route.css = [current.$$route.css];
                        }
                        angular.forEach(current.$$route.css, function(sheet){
                            delete scope.routeStyles[sheet];
                        });
                    }
                    if(next && next.$$route && next.$$route.css){
                        if(!Array.isArray(next.$$route.css)){
                            next.$$route.css = [next.$$route.css];
                        }
                        angular.forEach(next.$$route.css, function(sheet){
                            scope.routeStyles[sheet] = sheet;
                        });
                    }
                });
            }
        };
    }
]);

APP CONTROLLER

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html', 
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })
        .when('/some/route/2', {
            templateUrl: 'partials/partial2.html',
            controller: 'Partial2Ctrl',
            css: ['css/partial2_1.css','css/partial2_2.css']
        })
}]);

Output I am getting

CSS

<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="css/createtroll.css" class="ng-scope" href="css/partial2.css">

HTML

<script ng-repeat="(routeCtrl, scriptUrl) in routeScript" ng-src="js/page.css" class="ng-scope" src="css/scroll.js"></script>

I want know how to remove the ng-directives form the output and how to load js before document.ready so that I don't get the error. Any help is much appreciated.

Alex Choroshin · Accepted Answer · 2014-03-23 10:13:00Z

1

it seems that you are looking for a way to lazy-load some aspect of our AngularJS application by loading JS and CSS files asynchronously.

You cannot use controllers/directives for loading your files because your app has already been bootstrapped.

You'll need some kind of file/module loader, for example you can use RequireJS - a JavaScript file and module loader. there are already a lot of examples and implementation of RequireJS and AngularJS.

Example:

require.config({
    baseUrl: "js",    
    paths: {
        'angular': '.../angular.min',
        'angular-route': '.../angular-route.min',
        'angularAMD': '.../angularAMD.min'
    },
    shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
    deps: ['app']
});

Reference:

http://marcoslin.github.io/angularAMD/#/home

http://www.startersquad.com/blog/angularjs-requirejs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm

http://requirejs.org/

edited Mar 23, 2014 at 10:13

answered Mar 23, 2014 at 9:56

Alex Choroshin

6,1872 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Over a year ago

Is there a demo on how to achieve this using require and angular??

Alex Choroshin Over a year ago

as you can see I added some reference articles with examples.

Alex Over a year ago

but still haven't haven't figured out a gud solution for CSS do you know??

Alex Choroshin Over a year ago

using require.js you can also add css files, I found this example : requirejs.org/docs/faq-advanced.html#css

Alex Over a year ago

this function i'll have to call from the partial, i don't want to do that, it will defeat the whole purpose. I want to do it form the routers.

|

Collectives™ on Stack Overflow

Angular: Adding custom script/css to partials via controller

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related