How to integrate Angularjs with common scripts?

Asked

Viewed 1,392 times

9

My doubt started when I tried to use the Carousel twitter bootstrap inside an Angularjs project, it didn’t work at all.

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

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

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

3 - Example, I want to use Openlayers in a project, I would have to rewrite a plugin so I could instantiate the objects and work at the angle? like this one guy did

javascript jquery angularjs

3 answers

5


First of all, answers to your questions:

1) Not. But it’s interesting that you know how Angularjs works, thus avoiding conflicts between the ways different Javascript plugins interact with each other (as well as your environment expectations).

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

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

https://stackoverflow.com/questions/21907843/bootstrap-carousel-not-working-with-angularjs

2) Not. I have, for example, solutions that mix native code Javascript, Jquery (base and UI), Angularjs, D3.JS... the list goes on. As long as you are aware of the way these modules/frameworks behave, integration is no problem.

3) The choice is yours. You can embed your content directly into a controller, implement a service or directive or use ready-made components. This post (in English) describes a developer’s successful attempt to integrate Angularjs and Openlayers:

http://siderite.blogspot.com/2013/10/openlayers-angularjs-add-features.html

Angularjs is a framework for application development, and has its own characteristics when it comes to the injection of dependencies, Binding of objects and data scope. further study may help you identify the reasons why your initial attempts were unsuccessful.

  • +1 Sensational your reply! Thank you.

  • You can give an example of Angularjs with D3.JS, please?

  • 1

    @Nottherealhemingway you say a site that uses both? I implemented this one, which uses D3.js for the taxonomic dendogram: https://pubapps.bucknell.edu/mammalspecies/#/map/3170

  • Your work is beautiful, @Onosendai! I really loved it, only I wanted to learn too, so I asked for an example (I forgot to mention the example with the code). Anyway, thank you. It was inspiring!

  • @Nottherealhemingway Err sorry, lack of coffee. = ) Let me prepare one for you.

4

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

1) Services and 2) Directives

To use something else (say, a Jquery plugin) within an Angular project, it is necessary to create a kind of "angular wrapper" for this thing, and then you use this "wrapper". This wrapper has to be a service or a directive.

As a rule of thumb: - 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 sort of DOM manipulation, you will want to create a directive.

An example of a service: In the ng-Masters [1] mini-course [2], see steps 8, and 9. In step 9, I create a wrapper around jquery.get() to talk to a fake backend

An example of a directive: 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 to do this with Angular (rather than putting a $('.tooltip').tooltip() onload page), because it still works even on new "tooltyped" elements that will be added to the DOM after the page has been loaded.

  • Thanks Tony! Quite enlightening, I will study more deeply the Angular, thanks for the reply.

1

The angular was developed primarily for testing. You can even insert scripts outside the angular pattern, but at the time of the tests you will have problem.

But his case is similar to mine. When I developed my project in angular I was instructed to use the bootstrap and I ended up asking myself the same thing. Luckily, there is a staff that has already rewritten bootstrap.js in angular:

http://angular-ui.github.io/bootstrap/

As for Openlayers, using this project you sent the link will not suit you the same way as the boostrap above?

  • Ian Luca, is that the question is more philosophical you know, in a hypothetical idea that someday I need a specific library that someone has not yet written how I will proceed? The question is about the flexibility of Angular to accept standards that are not relative to its syntax and make a legacy code for example work on the project’s infrastructure, as cited in the example, the Bootstrap Carousel.

  • Then you create @Pauloluan directives, and it’s your idea to use external scripts(plugins) together with Angularjs

Browser other questions tagged javascript jquery angularjs

You are not signed in. Login or sign up in order to post.