How to integrate AngularJS with common scripts?


My question started when I tried to use the twitter bootstrap Carousel within an AngularJS project, it did not work at all.

I found the angular-ui , I solved my problem using this component, but my doubts are as follows:

1 - For every common thing I want to use in Angular, will I have to rewrite it to work on the project syntax? For example, in the case quoted I would have to rewrite the Carousel in the syntax of Angular to be able to use?

2 - Creating an AngularJS project will I have to use only the plugins created for this platform? How do I deal with "common" Javascript codes?

3 - Example, I want to use OpenLayers in a project, would I have to rewrite a plugin so that I could instantiate the objects and work in the angular? such as face made

asked by anonymous 03.12.2014 / 17:35

3 answers


First of all, answer your questions:

1) No . However, it is interesting to know how AngularJS works, thus avoiding conflicts between the ways in which different JavaScript plugins interact with each other (as well as their environment expectations).

Most of the problems encountered by users using Twitter Carousel with AngularJS is due to the way Angular intercepts Anchor ( <A> ) tags.

This original OS post explains this problem well, and user rbanning solved the problem without using the Angular Bootstrap UI:


2) No . I have, for example, solutions that mix native JavaScript code, JQuery (base and UI), AngularJS, D3.JS ... the list goes on. As long as you're aware of how these modules / frameworks behave, integration is no problem.

3) The choice is yours . You can embed your content directly into a controller , deploy a service or policy, or use ready-made components. This post describes the successful attempt by a developer to integrate AngularJS and OpenLayers:


AngularJS is a framework for application development, and has its own characteristics regarding dependency injection, binding of objects and data scope. a more in-depth study can help you identify the reasons why your initial attempts were not successful.

03.12.2014 / 22:18

Angular has basically 2 types of components that you can build and use:

1) Services and 2) Policies

To use something else (say, a JQuery plugin) within an Angular project, you need to create a kind of "angular wrapper" for this thing, and then you use that wrapper. This wrapper has to be a service or policy.

As a rule: - if what you want to use is simply a javascript object, you will want to create a Service - if what you want to use does some kind of manipulation of the DOM, you will want to create a directive.

An example of a service: In step 9, I create a wrapper around jquery.get () to talk to a backend of a lie

An example policy: In this post [3], Pedro Nauck teaches how to create a "tooltip" directive that applies a Jquery tooltip to any element. This is the "right" way of doing this with Angular (instead of putting% on the onload of the page) because this still works even on new "tooltip" elements that will be added in the DOM after the page has been loaded.

03.12.2014 / 21:30

Angular was developed primarily for testing. You can even insert scripts out of angular pattern, but at the time of testing you will have a problem.

But your case is similar to mine. When I developed my angular project I was instructed to use the bootstrap and I ended up wondering the same thing. Luckily, some people have already rewritten the bootstrap.js in angular:


As for OpenLayers, using this project that you sent the link will not serve you the same way as the one from the above boostrap?

03.12.2014 / 18:22