9

Minha dúvida começou quando eu tentei usar o Carousel do twitter bootstrap dentro de um projeto AngularJS, não funcionou de jeito nenhum.

Encontrei o angular-ui, resolvi meu problema utilizando este componente, mas minhas dúvidas são as seguinte:

1 - Para cada coisa comum que eu queira utilizar no Angular eu terei que reescrever para que funcione na sintaxe do projeto? Por exemplo, no caso citado eu teria que reescrever o Carousel na sintaxe do Angular para poder utilizar?

2 - Criando um projeto AngularJS eu terei que utilizar apenas os plugins criados para esta plataforma? Como eu lido com códigos Javascript "comuns" ?

3 - Exemplo, eu quero usar OpenLayers em um projeto, eu teria que reescrever um plugin para que eu pudesse instanciar os objetos e funcionar no angular? como por exemplo esse cara fez

3 Respostas 3

5

Antes de mais nada, respostas às suas perguntas:

1) Não. Porém é interessante que você saiba como o AngularJS funciona, evitando assim conflitos entre as maneiras como diferentes plugins JavaScript interagem entre si (assim como suas expectativas de ambiente).

Grande parte dos problemas encontrados por usuários utilizando o Twitter Carousel com AngularJS é devido à maneira como o Angular intercepta tags Anchor (<A>).

Este post do SO original explica bem este problema, e o usuário rbanning solucionou o problema sem usar o Angular Bootstrap UI:

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

2) Não. Eu tenho, por exemplo, soluções que misturam código nativo JavaScript, JQuery (base e UI), AngularJS, D3.JS... a lista continua. Contanto que você esteja atento à maneira como estes módulos/frameworks se comportam, integração não é problema.

3) A escolha é sua. Você pode incorporar seu conteúdo diretamente em um controller, implementar um serviço ou uma diretiva ou utilizar componentes já prontos. Este post (em inglês) descreve a tentativa bem-sucedida de um desenvolvedor para integrar AngularJS e OpenLayers:

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

AngularJS é um framework para desenvolvimento de aplicações, e possui características próprias no que tange à injeção de dependências, binding de objetos e escopo de dados. um estudo mais aprofundado pode lhe ajudar a identificar as razões pelas quais suas tentativas iniciais não foram bem-sucedidas.

5
  • +1 Sensacional sua resposta! Obrigado.
    – Paulo Luan
    4/12/2014 às 11:50
  • Você pode dar um exemplo do AngularJS com D3.JS, por favor? 24/01/2017 às 20:11
  • 1
    @NotTheRealHemingway você diz um site que utiliza os dois? Eu implementei este aqui, que utiliza d3.js para o dendograma taxonômico: pubapps.bucknell.edu/mammalspecies/#/map/3170
    – OnoSendai
    24/01/2017 às 20:17
  • Ficou lindo seu trabalho, @OnoSendai! Eu adorei de verdade, só que eu queria aprender também, por isso pedi um exemplo (esqueci de falar do exemplo com o código). De qualquer forma, obrigado. Foi inspirador! 24/01/2017 às 20:23
  • @NotTheRealHemingway Err desculpe, falta de café. =) Deixa eu preparar um pra você.
    – OnoSendai
    24/01/2017 às 20:31
4

O Angular tem basicamente 2 tipos de componentes que vc pode construir e usar:

1) Serviços e 2) Diretivas

Pra usar alguma outra coisa (digamos, um plugin JQuery) dentro de um projeto Angular, é necessário criar uma espécie de "wrapper angular" pra essa coisa, e aí vc usa esse "wrapper". Esse wrapper, tem que ser um serviço ou uma diretiva.

Via de regra: - se o que vc quer usar é simplesmente um objeto javascript, vc vai querer criar um Serviço - se o que vc quer usar faz algum tipo de manipulação do DOM, vc vai querer criar uma diretiva.

Um exemplo de um serviço: No minicurso [1] do ng-masters [2], veja os passos 8, e 9. No passo 9, eu crio um wrapper em volta do jquery.get() pra falar com um backend de mentirinha

Um exemplo de diretiva: Nesse post [3], o Pedro Nauck ensina como criar uma diretiva "tooltip" que aplica uma tooltip Jquery num elemento qualquer. Esse é o jeito "certo" de fazer isso com Angular (ao inves de botar um $('.tooltip').tooltip() no onload da pagina), porque isso continua funcionando mesmo em novos elementos "tooltipados" que venham a ser adicionados no DOM depois da página ter sido carregada.

1
  • Valeu Tony! Bastante esclarecedor, vou estudar mais a fundo o Angular, obrigado pela resposta.
    – Paulo Luan
    4/12/2014 às 15:40
1

O angular foi desenvolvido principalmente para testes. Você até pode inserir scripts fora do padrão angular, mas na hora dos testes você vai ter problema.

Mas seu caso é parecido com o meu. Quando desenvolvi meu projeto em angular fui instruido a usar o bootstrap e acabei me perguntando a mesma coisa. Por sorte, tem um pessoal que já reescreveu o bootstrap.js em angular:

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

Quanto ao OpenLayers, usar este projeto que você mandou o link não vai te atender do mesmo jeito que esse do boostrap acima?

2
  • Ian Luca, é que a questão é mais filosófica sabe, numa hipotética idéia de que algum dia eu necessite de uma biblioteca específica que alguém ainda não tenha escrito como vou proceder? A questão é sobre a flexibilidade do Angular em aceitar os padrões que não são relativos a sua sintaxe e fazer com que um código legado por exemplo funcione na infraestrutura do projeto, como citado no exemplo, o carousel do Bootstrap.
    – Paulo Luan
    3/12/2014 às 17:35
  • Aí você cria diretivas @PauloLuan, e é ideia de você utilizar scripts externos(plugins) juntamente com AngularJS
    – Rod
    3/12/2014 às 17:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .