How to use Materialize with Angular?

Question

How to use Materialize with Angular?

Navigation

#1 by (1 votes)
#2 by (1 votes)

5

I'm developing a project, but even though it imports all the CDNs, the angular and the materialize, the materialize JavaScript does not want to work along with the angular, is there some kind of conflict?

Importing files:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/an‌gular.min.js"/><scriptsrc="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"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97‌.6/js/materialize.mi‌n.js"/>

On the console it only displays the error:

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

Note: I already imported the jquery cdn!

javascript angularjs framework front-end materialize

asked by anonymous 22.06.2016 / 23:58

2 answers

Carousel Content Affects SEO? Is the content of the hidden Carousel indexed? How to display only dates defined in datepicker

score 1 · Answer 1

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

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"/><scriptsrc="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 is because each library you use must already have its dependencies previously declared so that the library can use them. That is, to include angularJS and materialize your project needs jQuery , to use route and resource you need angularJS , in addition to being able to rotate your controllers and services Of course, you need the above items.

score 1 · Answer 2

You can not merge two (jQuery and Angular) if the desire is to change the DOM via jQuery within an Angular application, as this should be done via directives, even because AngularJS comes with an integrated jQuery Lite version.

It is recommended to use AngularJS's own libraries, such as Angular bootstrap , Angular Material or Angular Materialize in your case. In most cases the documentation and examples are complete.