Angular JS conflict with Jquery

Question

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?

Answer 1

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