4

Estou desenvolvendo um projeto, mas mesmo importando todos os CDN, do angular e do materialize, o JavaScript do materialize não quer funcionar junto com o angular, exite algum tipo de conflito ?

Importação dos arquivos:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/an‌gular.min.js"/>
<script src="js/lib/angular-route.js"/>
<script src="js/lib/angular-resource.js"/>
<script src="js/main.js"></script>
<script src="js/controllers/contatos-controller.js"/>
<script src="js/controllers/contato-controller.js"/>
<script src="js/directives/minhas-diretivas.js"/>
<script src="js/services/meus-servicos.js"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97‌​.6/js/materialize.mi‌​n.js"/>

No console ele apresenta somente o erro:

Uncaught ReferenceError: $ is not defined(anonymous function) @materialize.min.js:6',..

Observação: Eu ja importei o cdn do jquery!

8
  • Algum erro é apresentado no console do navegador? Ou simplesmente não funciona? Chegou a verificar o angular-materialize? Ele inclui uma série de diretivas que permite ao Angular lidar com a maioria dos componentes JS do Materialize.
    – cbonomini
    Commented 22/06/2016 às 22:35
  • No console ele apresenta o somente o erro 'Uncaught ReferenceError: $ is not defined(anonymous function) @ materialize.min.js:6',.. mas o css aparece normalmente, só as açoes que não acontecem Commented 22/06/2016 às 22:48
  • Qual a ordem das tags scripts? Consegui reproduzir este mesmo erro quando declaro o jQuery depois do materialize.min.js. Tente alterar a ordem das tags. Deixe na ordem: Angular, JQuery e depois o materialize.
    – cbonomini
    Commented 22/06/2016 às 23:06
  • <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"//> <script src="js/lib/angular-route.js"/> <script src="js/lib/angular-resource.js"/> <script src="js/main.js"></script> <script src="js/controllers/contatos-controller.js"/> <script src="js/controllers/contato-controller.js"/> <script src="js/directives/minhas-diretivas.js"/> <script src="js/services/meus-servicos.js"/> <script src="https://code.jquery.com/jquery-2.1.1.min.js"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"/> Commented 23/06/2016 às 0:12
  • Quando estou utilizando somente o materialize sei que existe essa ordem,.. mas agora com o angular ja tentei de todas as formas mas a unica diferença é que tem hora que meu angular para de funcionar e nem consigo ver se o materialize voltou Commented 23/06/2016 às 0:14

2 Respostas 2

1

Não é indicado mesclar os dois (jQuery e Angular) caso o desejo seja alterar o DOM via jQuery dentro de uma aplicação Angular, pois isso deve ser feito via diretivas, até porque o AngularJS vem com uma versão Lite integrada do jQuery.

O recomendado é usar bibliotecas do próprio AngularJS, como Angular bootstrap, Angular Material ou Angular Materialize no seu caso. Na maioria dos casos a documentação e exemplos são completos.

1
  • É o ideal, porém pode-se usar jQuery junto sim, especialmente para os casos em que a versão lite nao seja suficiente e algo/alguma lib dependa dele. No meu caso, achei que o Angular Material e o Angular Materialize vão muito além do que quero, entao apenas encapsulei os metodos nativos do materialize.js (que usa jquery) no angular Commented 14/12/2017 às 5:56
0

O erro que você declarou é causado por não adicionar o Jquery na página antes de tentar usa-lo. A declaracao deveria funcionar como segue:

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"/> 
    <script src="js/lib/angular-route.js"/> 
    <script src="js/lib/angular-resource.js"/> 
    <script src="js/main.js"/>
    <script src="js/directives/minhas-diretivas.js"/> 
    <script src="js/services/meus-servicos.js"/>
    <script src="js/controllers/contatos-controller.js"/> 
    <script src="js/controllers/contato-controller.js"/> 

Isso acontece por que a cada biblioteca que você utiliza deve já ter suas dependências previamente declaradas, para que a biblioteca possa usa-las. Ou seja, para incluir o angularJS e o materialize seu projeto precisa de jQuery, para usar route e resource você precisa do angularJS, além para conseguir rodar seus controllers e services claro, você necessita dos itens anteriores.

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 .