current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite
3

I am in the middle of developing an web app. I am using AngularJS for loading all the files dynamically into the UI.
1. i have and index.html onto which all the files will be loaded dynamically on click or on load.

    //index.html
    <signin button> <signup button> // etc.,
    //on-clicking signin button a SignIn-page will load in the below div

    <div id="bodyview"></div>
    // end of index.html

Now my sign-in page looks somewhat like the below structure

    /*a div where my accordion menu will load when the 
     *below submit button is clicked*/

    <div id="menu"></div>

    //other sign-in-form stuff will follow on...

    //submit button at the end
    <submit button> //only on clicking the submit button the menu will be loaded

Now my problem is, though i'm able to load the accordion menu.html file, i'm not able to load the css and js files it is dependent on. I have looked into most of the stackoverflow discussions and many others.. but none worked for me.
Can anybody please help in determining a way for loading the css and js dependencies using Angular JS...?
Any Help is appreciated. Thanks in advance

share|improve this question

3 Answers 3

up vote 9 down vote accepted

Just write a service to add CSS and JS files to the <head>

Here is a example service which is used to dynamically load CSS files.You can modify it easily to load JS files.

https://github.com/Yappli/angular-css-injector

share|improve this answer
4  
Looks like Yappli refactred his Github.. for those thwarted by a measly 404, here y'ar github.com/Yappli/angular-css-injector –  irth Nov 11 '13 at 4:14
    
can this be also used to inject JS files? –  mulla.azzi Jun 11 at 10:10
up vote 1 down vote 
app.controller('MyCtrl', function($scope,$compile) {
 $("#my").append( $compile("<script src='my.js'>")($scope) );
});
share|improve this answer
    
Yes! this is the wrong way. See docs.angularjs.org/guide/directive –  OmarIthawi Feb 4 at 7:33
up vote -1 down vote

Instead of going by AngularJS way, i tried to load the files using JQuery. It worked for me. You can check this link for reference

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.