How to use Materialize with Angular?

Asked

Viewed 2,568 times

4

I’m developing a project, but even importing all the CDN, the angular and the materialize, the materialize Javascript does not want to work together with the angular, there is some kind of conflict ?

File import:

<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"/>

On the console it presents only the error:

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

Observing: I already imported the Cdn from jquery!

javascript angularjs framework front-end materialize

  • Is there an error shown in the browser console? Or does it just not work? Did you ever check the angular-materialize? It includes a series of directives that allows Angular to handle most of the JS components of Materialize.

  • On the console it displays only the error 'Uncaught Referenceerror: $ is not defined(Anonymous Function) @ materialize.min.js:6',.. but css appears normally, only the steels that do not happen

  • What is the order of the scripts tags? I was able to play this same error when declaring jQuery after the materialize.min.js. Try to change the order of the tags. Leave it in order: Angular, Jquery and then materialize it.

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

  • When I am using only the materialize I know that there is this order,. but now with the angular I’ve tried every way but the only difference is that it’s time that my angular stops working and I can’t even see if the materialize came back

  • edit your question by adding the current state of the requisicoes, taking it out of the comments. Not everyone will necessarily look at them to try to help you.

  • I don’t know if it was because you posted in the comment - but here it caused an error. Try this http://pastebin.com/p2h438FP. It was with some special character.

  • https://krescruz.github.io/angular-materialize/

Show 3 more comments

2 answers

1

It is not indicated to merge the two (jQuery and Angular) if the wish is to change the DOM via jQuery within an Angular application, as this should be done via directives, because Angularjs comes with an integrated Lite version of jQuery.

The recommended is to use libraries of Angularjs itself, such as Angular bootstrap, Angular Material or Angular Materialize in your case. In most cases the documentation and examples are complete.

  • It is ideal, but you can use jQuery together yes, especially for cases where the lite version is not enough and something/some lib depends on it. In my case, I found that Angular Material and Angular Materialize go far beyond what I want, so I just encapsulated the native methods of materialize.js (which uses jquery) at the angle

0

The error you declared is caused by not adding Jquery to the page before trying to use it. The statement should work as follows: 

    <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"/>

This happens because every library you use must already have its dependencies previously declared, so that the library can use them. That is, to include the angularJS and the materialize your project needs to jQuery, to use route and resource you need the angularJS, in addition to being able to rotate their controllers and services of course, you need the previous items.

Browser other questions tagged javascript angularjs framework front-end materialize

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