1

I am developing a widget using Angular.

I have an index.html file and script.js file. From the index.html i included the script.js file.

The scripts.js file is checking the Angular is already loaded or not. If the Angular is not loaded then latest Angular.min.js (tried 1.3.14 version) is dynamically appended to the head tag. And on success of Angular load I created angular module like angular.module("widgetApp", []). This is working fine.

But if I included a jQuery js (tried <2 and >2 versions) file from index.html just before the script.js, then it makes script errors from angular library.

This is the error I got: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=myWidgetApp&p1=Err…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.12%2Fangular.min.js%3A17%3A381).

I have created a plunker for this issue: http://plnkr.co/edit/JHDrGakpuLWpfeauUs1V?p=preview

Any body have any idea on this issue?

Improve this question
1
  • Can you add the relevant content from scripts.js ? Commented Mar 11, 2015 at 11:29

1 Answer 1

Reset to default
2

It seemed to be a problem with the order of ng-app being applied before the module was created. It's probably better/more reliable to manually bootstrap instead of adding the ng-app attribute:

angular.bootstrap(document, ['myWidgetApp'])

This way you can control when the bootstrap happens, which should only be after everything is loaded (in scriptLoadHandler)

Here's the working plunkr: http://plnkr.co/edit/DKlh5S1ZisxIwluXeJ38?p=preview

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

1 Comment

Thanks for your valuable solution. Leme try by integrating this in my project.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.